Skip to content

Instantly share code, notes, and snippets.

@SimonPadbury

SimonPadbury/hovernav.css

Last active April 4, 2019 00:29
Show Gist options
  • Save SimonPadbury/6774640 to your computer and use it in GitHub Desktop.
Save SimonPadbury/6774640 to your computer and use it in GitHub Desktop.
Download ZIP
This is a simple supplement for Bootstrap 3 to transform the navbar so that the dropdown menu appears on hover instead of on click. No need to modify the Bootstrap 3 js or css at all – simply add this js and css below to your js and css files that are <head> linked *after* the Bootstrap 3 js and css files. Styles for both .navbar-default and .na…
Raw
hovernav.css
/*
Navbar "hovernav" dropdown menu - this works only for screen sizes larger than phones.
The Bootstrap CSS is unchanged.
*/
@media (min-width: 768px) {
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background: none;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #969696;
background: none;
}
.navbar-nav .hovernav:hover > .dropdown-menu {
display: block;
}
}
Raw
hovernav.js
$(document).ready(function() {
// "Hovernav" navbar dropdown on hover
// Uses jQuery Media Query - see http://www.sitepoint.com/javascript-media-queries/
var mq = window.matchMedia('(min-width: 768px)');
if (mq.matches) {
$('ul.navbar-nav > li').addClass('hovernav');
} else {
$('ul.navbar-nav > li').removeClass('hovernav');
};
// The addClass/removeClass also needs to be triggered on page resize <=> 768px
function WidthChange(mq) {
if (mq.matches) {
$('ul.navbar-nav > li').addClass('hovernav');
} else {
$(‘.hovernav a’).unbind(‘click’);
$('ul.navbar-nav > li').removeClass('hovernav');
}
}
if (matchMedia) {
var mq = window.matchMedia('(min-width: 768px)');
mq.addListener(WidthChange);
WidthChange(mq);
}
// Restore "clickable parent links" in navbar
$('.hovernav a').click(function () {
window.location = this.href;
});
});
@EugenAz
Copy link

EugenAz commented Jan 14, 2016

Is it an easter egg on 29th line of js? :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment