CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user5646052
user5646052

Reputation: 1

Onepage bootstrap navbar toggle not working properly in mobile mode when set as navbar-fixed-top

I followed a youtube video for making a one page website. One problem I met was when set the navbar-fixed-top. When in mobile mode, the toggle menu dropdown on top of the content and covered them, which does not push the content down under the navbar or collapse back after select one menu. It remains there and covered on top of the content except I click the toggle button again. I tried to remove the navbar-fixed-top, then in mobile mode, the content is pushed down under the drop down menu but that's not what I want. I checked answers from this site, many similar questions but I did not find the proper answer. I tried to use updated jquery and javacript links, but still not work. Could anybody take a look of what's the problem? Many tks!

<body data-spy="scroll" data-target="#my-navbar">
 [enter image description here][1]<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
    <div class="container">
        <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>
               <span class="icon-bar"></span>
            </button> 

            <a href=" " class="navbar-brand">Myapp</a>
        </div><!--Navbar Header-->
        <div class="collapse navbar-collapse" id="navbar-collapse">
        <a href="" class="btn btn-warning navbar-btn navbar-
         right">Download Now</a>
            <ul class="nav navbar-nav">
                <li><a href="#feedback">Feedback</a>
                <li><a href="#gallery">Gallery</a>
                <li><a href="#features">Features</a>
                <li><a href="#faq">Faq</a>
                <li><a href="#contact">Contact Us</a>
            </ul>
        </div>
    </div><!--End Container-->
</nav><!--End navbar-->

And for the code whole page, here is the links: http://codepen.io/anon/pen/bEGzpo

Upvotes: 0

Views: 966

Answers (1)

Praveen Poonia
Praveen Poonia

Reputation: 765

Use the below given code it scroll with animation -

$('a[href^="#"]').on('click',function (e) {
            e.preventDefault();

            var target = this.hash;
            var $target = $(target);

            $('html, body').stop().animate({
                'scrollTop': $target.offset().top - 70
            }, 900, 'swing', function () {
                window.location.hash = target;
            });
        });

and the below code help on auto closing of hamburger menu in mobile - 

//Hamburger menu toggle
  $(".navbar-nav li a").click(function (event) {
    // check if window is small enough so dropdown is created
    var toggle = $(".navbar-toggle").is(":visible");
    if (toggle) {
      $(".navbar-collapse").collapse('hide');
    }
  });

this work fine in http://hardcoredevs.com/

Upvotes: 1

Related Questions