Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap Navbar Menu without Javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 580
    Comment on it

    The navbar menu is used in header or footer and in many cases in the content also. It is responsive by default in bootstrap and take size according to screen size.
    The navbar get collapsed in case of small devices like mobile phones and there is some icon on clicking of which the navbar menu can be closed or open.
    bootstrap javascript is needed to collapse the navbar menu.  Sometimes we don’t need javascript file to collapse navbar menu.  There is a way by which you can can collapse bootstrap navbar without using javascript. Here is the example:

    HTML:

    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
    <input type="checkbox" id="navbar-toggle-check>
    <div class="navbar-header">
    <label for="navbar-toggle-check 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>
    </label>
    <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </div>
    </div>
    </nav>
    

    CSS:

    #navbar-toggle-check {
      display:none
    }
    #navbar-toggle-check:checked ~ .collapse {
        display: block;
    }

    In this example we have added a checkbox and hide it by using css. The button is replaced by label and we connect the label to checkbox by giving for attribute. And on the basis of checkbox condition the navbar toggles.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: