Link to home
Start Free TrialLog in
Avatar of VBdotnet2005
VBdotnet2005Flag for United States of America

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>

Open in new window

image_1.png
Avatar of Vimal DM
Vimal DM
Flag of India image

Hi,

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

margin, padding and width:100px.

Thanks
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial