The default approach of the classic Bootstrap 3 navigation bars, is to have a classic menu bar on desktop devices, and a hidden menu on mobile devices, that reveals upon clicking the in[famous] hamburger icon. You can see this happen on this very website. Vanilla.
While this approach makes perfect sense in most cases, in some kind of situations you may want to have the “mobile menu” approach also on desktop devices – keeping the menu always hidden – and show just the hamburger icon.
A visual example of what we’re talking about:
Where could this make sense?
Typical use cases for this “hamburger always”, controversial navigational approach that come to my mind could be:
- Fancy, simple, “business-card” sites where form takes over functionality – or when the designer takes over the usability specialist
- Sites where your users will fall in the younger / more technically skilled public: if kids can catch Pokemons, they’ll tend to know, or at least to easily find out, what the hamburger icon is and where the navigation disappeared
- Sites where the main navigation is trivial and effectively duplicated in the homepage – so users may typically not even need it
So how to achieve this kind of always collapsed, hamburger-hidden navigation?
One of the easiest ways to have the Bootstrap navigation behave in this way is just to add some CSS to override the default behaviour.
That’s what this example child theme does – it adds some salted CSS to have a hamburger, always.
It’s name is HamburgerAlways and it’s pretty self-explanatory. You can download it clicking the button below.
Of course, this will need the original BBE theme to work – you can find a simple way to get it for free on our homepage.
If you are already using a child theme
If you already have your own, customized Child Theme – and want this hamburger hack, no worries: just grab the CSS code from the style.css file of the HamburgerAlways Child Theme, and append it to your own Child Theme’s CSS file.