CODEWITHSUNDEEP
twitter-bootstrap-3navbar
Kyle
Kyle

Reputation: 31

Navbar Dropdown Causes Navbar to Move Slightly Left On-Click

I have a navBar with a drop-down. When you select either of the links on the drop-down the menu moves slightly to the left (+- 10px). You can see it a little better in mobile view.

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <!-- add navbar-fixed-top -->
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="navbar-brand" href=""> <img src="" alt=""> </a> </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
          <li><a href="default.html"><i class="fa fa-home" aria-hidden="true"></i> </a></li>
          <li> <a href="#about-section">about</a> </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">overview <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#" data-toggle="modal" data-target="#myModal3">cost breakdown</a></li>
              <li><a href="#" data-toggle="modal" data-target="#myModal4">project progress</a></li>
            </ul>
          </li>
          <li> <a href="photos.html">photos</a> </li>
          <li> <a href="faq.html">faq</a> </li>
          <li> <a href="news.html">news</a> </li>
          <li> <a href="">contact</a> </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- container-fluid -->
  </nav>

https://jsfiddle.net/art852/uyg1otg5/12/

Upvotes: 0

Views: 741

Answers (1)

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

The shifting happens because you have a vertical scrollbar due to content overflow. If you add the following it will remove the shift.

#navbar {
  overflow-y:hidden;
}

https://jsfiddle.net/uyg1otg5/18/

Upvotes: 1

Related Questions