CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Bekah
Bekah

Reputation: 21

Bootstrap Navbar Dropdown Mobile Issue

When my web design collapsed to mobile view, the dropdown menu doesn't push down the button below it, instead the menu shows up half way down the page. This only seems to happen on pages with the carousel function and lightbox2.

Any help would be appreciated.

I have tried this which was suggested in another topic:

.navbar-header {
position: relative;

z-index: 1; }

Here's the Navbar code:

    <nav>
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="defaultNavbar1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home<span class="sr-only">(current)</span></a></li>
        <li><a href="about.html">About Me</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Photography<span class="caret"></span></a>
          <ul class="dropdown-menu">
          <li><a href="events.html">Events</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="music.html">Music</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="nature.html">Nature</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="people.html">People</a></li>
          </ul>
        </li>
        <li><a href="construction.html">Contact Me</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

and the scripts at the bottom`

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap-3.3.5.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="application/javascript"></script>
<script>
    lightbox.option({
      'resizeDuration': 600,
      'wrapAround': true,
      'alwaysShowNavOnTouchDevices': true,
      'fitImagesInViewport': true
    })
</script>`

Upvotes: 0

Views: 1280

Answers (2)

Bekah
Bekah

Reputation: 21

Fixed it.

I switched css files earlier on in the day and I didn't realise a .dropdown-menu was missing from the bootstrap css.

.navbar-nav .open .dropdown-menu

Upvotes: 2

Murgin Boo
Murgin Boo

Reputation: 67

I would suggest you to try putting the script tags at top ins. it might work.

Upvotes: 0

Related Questions