10

On mobile devices, Bootstrap 3 by default reduces the navigation bar (navbar) to a hamburger icon. When clicking the hamburger, a JavaScript toggles the display of the navigation menu items - either expanding or collapsing the navbar. But

how to toggle the bootstrap mobile navbar collapse/expand without requiring JavaScript?

If this were possible, it would have nice performance advantages: users can already navigate before JavaScript is executed (a good plus on flaky mobile connections), and smaller projects may be able to drop the dependency on jQuery + bootstrap javascript entirely, saving around 45k on first page load. Plus, the site becomes more robust in case of JS errors - at least the page navigation stays usable.

Alternatively, one could re-implement the bootstrap JS without jQuery dependency - done here for the navbar.

For reference, this is what the static navbar top example looks like in mobile mode:

Bootstrap 3 mobile navbar expanded

isherwood
  • 58,414
  • 16
  • 114
  • 157
flexponsive
  • 6,060
  • 8
  • 26
  • 41

1 Answers1

18

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 -->
Community
  • 1
  • 1
flexponsive
  • 6,060
  • 8
  • 26
  • 41
  • Great answer. Quick follow up - how do you then toggle the navbar-toggle-cbox to be closed once you click on one of the elements in the collapsed navbar? Can you do this using pure CSS? – Tom O'Brien Feb 01 '16 at 16:59
  • Good question - not sure how to do that yet. Can you explain your use case? I use this code for sites entirely without JS, so a click on the nav items triggers a complete page reload – flexponsive Feb 02 '16 at 06:41
  • I am using AngularJS, for routing, so when I click on a item in the navbar dropdown, it doesn't fire a complete page reload (i think). So the page loads below the navbar dropdown, and the navbar doesn't re-collapse. – Tom O'Brien Feb 02 '16 at 12:22
  • 3
    I see - in this case you will probably need to work with Angular/JavaScript somehow – flexponsive Feb 02 '16 at 13:02
  • This doesn't seem to work : https://jsfiddle.net/2k9bb8hd/, can you post a snippet here? – Basj Dec 19 '16 at 10:35
  • @basj Did you try the live demo linked above – flexponsive Dec 20 '16 at 23:32
  • @user3096626 `404 Not Found / nginx`. – Basj Dec 21 '16 at 08:24
  • https://cdn.rawgit.com/basteln3rk/bs3-navbar-collapse-without-javascript/master/index.html works for me? – flexponsive Dec 21 '16 at 11:25
  • CHECKOUT THE ACCEPTED ANSWER https://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jquery – Usman Iqbal Oct 23 '19 at 19:00