miotk miotk - 1 month ago 17
CSS Question

Bootstrap Navbar Buttons Getting Mixed Up

I have a Bootstrap Navbar that works fine in desktop but when shrunk down at about 425px the contact button starts to work as the login button as well, which it's never have done before.

The code I have is this



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="nav navtop navbar-nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Contact Us <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/business-advertising">Advertising</a></li>
<li><a href="/council-contact">Contact the Council </a></li>
<li><a href="/report-a-problem">Report a Problem</a></li>
</ul>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<p class="modalfooter discoverthesecret">discover the secret...</p>
</div>
</div>
</div>
</div>





So when I click on the contact us, it loads up the login modal?

Thank you.

Answer

Your second list item (login btn) is over the first so you are triggering the the second instead of first

add the following:

.nav>li {
    width: 50%;
    float: right;
}