Bootstrap - dropdown not highlighted properly

VBdotnet2005
VBdotnet2005 used Ask the Experts™
on
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>

Open in new window

image_1.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Vimal DMSenior Software Engineer

Commented:
Hi,

It is CSS change i think might be with the following properties,

margin, padding and width:100px.

Thanks
By default there is a space before the first item and space after the latest element.
The .dropdown-menu .divider have a padding
If you have more menu item you will see the difference.
Check Bootstrap.css
for more info http://getbootstrap.com/javascript/#within-a-navbar

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial