After making some adjustments to Bootstrap using a custom -theme.css file, I successfully altered the appearance of the dropdown menu. By removing the borders from the navbar and wrapping a header around it set to be fixed on top, everything seemed to be working well. However, there were instances where content from the body would overlap the dropdown menu, as shown in the image below:
https://i.stack.imgur.com/9s7KA.png
Below is the code snippet used for the <header> tag surrounding the navbar:
.site-header {
border-bottom: solid 1px #e1e1e1;
height: 52px;
position: fixed;
top: 0;
display: block;
width: 100%;
}