Skip to content

How to enable features when javascript is disabled

Bryan Willis edited this page Feb 15, 2016 · 1 revision

Bootstrap Genesis applies the HTML5 Boilerplate no-js class when javascript is disabled and also a js class when it's enabled. There probably aren't a lot of people who have actually used this in their theme so an example might help get people started.

This enables the navbar to work when javascript is disabled. In this example the submenus will work which they normally wouldn't when javascript is disabled. It doesn't work as good as when javascript is enabled, but at least this gets it working! This example can be changed to a pure hover menu by simply changing the :focus pseudo classes to :hover.

.no-js .dropdown a:focus ~ .dropdown-menu {
	display: block;
}
@media (max-width: 767px ) {
    .no-js .navbar-nav .dropdown-toggle:focus ~ .dropdown-menu {
	position: static;
	float: none;
	width: auto;
	margin-top: 0;
	background-color: transparent;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
  	display: block;
    }
    .no-js .navbar-header:hover ~ .collapse,
    .no-js .navbar-header ~ .collapse:hover {
	display: block;
	overflow-y: visible;
	overflow-x: visible;
    }
}