The navigation menu in the header is a flexbox responsive menu built on a HTML widget base. Do not unlock and remove this widget because you will lose it. This menu will change it's "flex-direction" to column on small devices like phones. There are not many customizations here but you don't need anything.
Default Options
The widget is a list based HTML menu. It's wrapped in a ul element and you have to build your HTML with li items.
HTML markup of the empty widget looks like this:
<div id="menu">
<input id="mainNavButton" type="checkbox" />
<label for="mainNavButton"></label>
<ul class="menu" id="menu-top-bar">
--- your li items here ---
</ul>
</div>
To make it responsive we will use a class: menu-item for each parent li element like:
<li class="menu-item"></li>
... and a class: sub-menu for each child ul element.
An item with child links will look like this:
<li class='menu-item'>
<a href='#'> Home </a>
<ul class='sub-menu'> Child li elements here </ul>
</li>
An example of this menu also with FontAwesome icons you can see live on this blog.
Posts
Join the conversation
We have 4 commenting systems, yes FOUR, and the template still loads very fast and without errors in the JS console. By default, all are enabled. You can replace Blogger with Google comments or you can disable Blogger/Google and use Facebook or Disqus. Your choice! ....and this message ? You can set it in Google Dashboard.