Various Bootstrap Menu Issues

Question

Various Bootstrap Menu Issues

389 Views Asked by designbydarren At 25 April 2025 at 13:55

I'm using Bootstrap 3 for a one page site that I am building. I've got a few issues thatI can't seem to overcome.

Scrollspy:

The first issue is regarding Scrollspy. I have implemented this but I'm wanting to unbind the scrollspy when scrolling up past the top most anchor. There are currently three items in the nav, the top most one being "work". When scrolling up beyond this area on the site I would like to unbind the "spying". I came up with an idea of adding an additional item into the nav (with an equivalent anchor) and then positioning it off the page, but this feels a bit dirty!

Collapsed menu on Mobile:

The other two issues I have are to do with the collapsed menu on mobile devices (tested on an iPhone 4).

The first is simply, when the nav is opened, then the the menu toggle is hit (to close it again) the collapsed menu does a strange flash, it doesn't just animate back out (as it does on web).

The second issue is that I would like the nav to disappear when one of the menu items is hit. I'm currently using the following code but it seems to cause some crazy scrolling of the page (again on a mobile device):

$('.nav li a').on('click',function(){
    $('.navbar-collapse').collapse('toggle');
})

Any help is greatly appreciated!

Original Q&A

There are 2 best solutions below

**gingin** · Answer 1

gingin On 12 September 2013 at 16:59

to get rid of the flashing when the nav is openend you may want to try the following:

    $('.nav li a').on('click',function(){
        $('.navbar-collapse').collapse('toggle');
        return false;
    })

**gingin** · Answer 2

I would start very close to the original template. The code below is taken from the original template and slightly adapted ... so at least the menu toggle should work without any additional custom js. hth

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
    <!-- main-logo -->
    <h1><img src="img/alfie-logo-sml.png" class="img-responsive  jumbotron--logo"/></h1>

      <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>

    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
         <li class="brand-font"><a href="#work">Work</a></li>
         <li class="brand-font"><a href="#team">Team</a></li>
         <li class="brand-font"><a href="#contact">Contact</a></li>
      </ul>

  </div><!-- /navbar-collapse -->

</div>

Various Bootstrap Menu Issues

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in MOBILE

Related Questions in NAV

Related Questions in SCROLLSPY

Trending Questions

Popular # Hahtags

Popular Questions