Issue with dropdown links not aligning properly in the Bootstrap navbar. The positioning seems off and can be seen in the screenshot provided where the blue outline represents the ".dropdown"
https://i.stack.imgur.com/QmG7v.png
Facing a similar problem as discussed here:
How to align dropdown menu in Navbar in Bootstrap with css?
Tried the recommended solution but unable to change the position of the drop-down link using positioning, margins, or padding.
Here's the HTML snippet:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button id="menuButton" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><br>
<span class="icon-bar"></span><br>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="index.html"><img src="images/rainbowLogo.png" id="homeLogo"></a></li>
<li class="dropdown">
<a class="navbar-brand dropdown-toggle" id="dropdown" type="button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Menus
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Store Menu</a></li>
<li><a href="#">Weedmaps</a></li>
</ul>
</li>
<li><a href="pakablog.html">Pakablog</a></li>
<li><a href="apparel.html">Apparel</a></li>
<li><a href="cultivation.html">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
And the CSS code:
.navbar.navbar-inverse.navbar-fixed-top {
display: block;
margin: 0 auto;
width: 100%;
height:110px;
max-width: 1920px;
background-color: #222222;
}
.nav.nav-pills li a{
line-height: 3em;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
color: white;
background-color: #222222;
font-family: 'Wendy One', sans-serif;
font-size: 36px;
display: table-cell;
margin-top: -49px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
... (remaining CSS code follows)