Expand/Collapse Mobile Navbar Without JavaScript

Expand/collapse mobile navbar without JavaScript

Yes, it's possible!

Getting the BS3 mobile navbar to toggle without JavaScript

1. creating a hidden checkbox that contains the navbar state (expand if checked)

2. changing the navbar button to a label for this invisible checkbox

3. use the CSS General Sibling Selector to toggle display of the navbar.

How to change CSS attributes without JavaScript was discussed before on SO, and the principle shown there 1. Applying this bootstrap is straightforward.

Try the Live demo thanks to rawgit or see it in production on flexponsive

A full demo is available on Github project bs3-navbar-collapse-without-javascript.

Browser Support

• the CSS general sibling selector is widely supported
• successfully tested in mobile: Android 5 and iOS 8
• also works on desktop: Chrome 43 and Firefox 38

Limitations

• dropdowns still require JS, if you decide to use them

Steps in detail

First, custom CSS you need to add:

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}

Then change the navbar HTML as follows:

<!-- insert checkbox -->
<input type="checkbox" id="navbar-toggle-cbox">
<!-- change the "hamburger" icon from being a button to a label for checkbox -->
<div class="navbar-header">
 <label for="navbar-toggle-cbox" 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>
<!-- end label not button -->

Collapse without javascript

You may use :checked selector.

#hidden {  display: none;  height: 100px;  background: red;}:checked + #hidden {  display: block;}

<input type="checkbox" id="my_checkbox" style="display:none;"><div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>

Bootstrap3: Fixed navbar in mobile layout is expanded by default on load without 'in' class

You are missing collapse but you also are adding the navbar on it, which is incorrect:

INCORRECT:

<div id="navbarCollapse" class="navbar navbar-collapse">

CORRECT:

<div id="navbarCollapse" class="navbar-collapse collapse">

DEMO: http://jsbin.com/koqas/1/edit

Bootstrap collapse mobile navbar not working

bootstrap.js file is missing in your fiddle.

Including it makes it working.

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

see this
http://jsfiddle.net/bfo38kb1/1

When I open website on mobile bootstrap navbar is not collapse

Add the class collapse in classes to your nav element. This way it will still be visible on mobile but the button will work like expected. If you only apply collapse as class and set the aria-expanded to false it will not be visible on mobile (but most likely also not in normal view).

<div class="container nbar collapse in" aria-expanded="true">
     <ul class="nav nav-justified">
         <!-- li's here -->  
     </ul>
</div>

How to hide collapsible Bootstrap navbar on click

Update 2021 - Bootstrap 5 (beta)

Use javascript to add a click event listener on the menu items to close the Collapse navbar..

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
    l.addEventListener('click', () => { bsCollapse.toggle() })
})

BS5 demo javascript method

Or, Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Disabled</a>
                </li>
            </ul>
            <form class="d-flex my-2 my-lg-0">
                <input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

BS5 demo data-attributes method

---

Update 2019 - Bootstrap 4

The navbar has changed, but the "close after click" method is still the same:

BS4 demo jQuery method

BS4 demo data-toggle method

---

Bootstrap 3 (original answer)

You can add the collapse component to the links like this..

<ul class="navbar-nav mr-auto">
     <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#about-us">About</a>
     </li>
     <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
         <a class="nav-link" href="#pricing">Pricing</a>
     </li>
 </ul>

BS3 demo using 'data-toggle' method

Or, (perhaps a better way) use jQuery like this..

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

BS3 demo using jQuery method

Change bootstrap navbar collapse breakpoint without using LESS

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

---

Related Topics