troubleshooting Question

Bootstrap - dropdown not highlighted properly

Avatar of VBdotnet2005
VBdotnet2005Flag for United States of America asked on
HTMLASP.NETJavaScriptBootstrap
2 Comments1 Solution161 ViewsLast Modified:
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>
image_1.png
ASKER CERTIFIED SOLUTION
lenamtl

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros