asked on Bootstrap - dropdown not highlighted properly
Due to my logo size, dimension 150x66, I have to adjust "navbar-brand" below. However, when I hoover over dropdown, the list is not fully highlighted. How can I fix it?
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!--logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" style="padding-top: 0px; padding-bottom: 10px">
<img src="image_1.gif" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li class="dropdown">
<a href="/" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> John Doe<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Switch User</a>
</li>
<%-- <li>
<a href="#">Account</a>
</li>
<li>
<a href="#">Billing</a>
</li>--%>
<li class="divider"></li>
<li>
<a href="#"><span class="glyphicon glyphicon-off"> Logout</span></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
HTMLASP.NETJavaScriptBootstrap
Last Comment
lenamtl
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
It is CSS change i think might be with the following properties,
margin, padding and width:100px.
Thanks