How to Customize the Header Menu Style

Tutorials  Last Updated: Time to Read: 4 minutes

This tutorial provides the basics of using your browser inspector to identify CSS selectors for customizing the main menu or “Header Menu” in Layers. To demonstrate, I’ll walk you through how to transform the default menu links into blocks that flip to a colored background on hover. If you are new to using the browser inspector, view the linked primer on the inspector for a brief introduction and linked tutorial to get you started. You can also take a super-shortcut and grab Layers Pro, which adds complete menu customization options to the Customizer to achieve the same results without code.

Before:

customnav-before

After:

customnav-after

Get complete menu control in the Customizer with Layers Pro, no coding required!

Right-click to the left of the first link in your menu and choose Inspect Element. This should land you on the <nav> element, or the unordered list <ul class="nav nav-horizontal">  inside it.

headermenu-styling

We specifically want to style the individual link, so we need to expand the <ul>  to view each link, which is wrapped in an <li class="menu-item"> . Click the <li>  element to select it in the HTML window on the left so you can view the associated CSS styles on the right.

Here we can see that each <li>  has a class of menu-item. We can also see that the default styling is declared using the .nav-horizontal li  selector. Both of these selectors will work, but what if we only want these links in the header menu to get this styling (and not custom menus or footer menus, which also get a menu-item class)?

If you follow the chain of HTML up the “cascade” or series of collapsible toggled tags in your inspector, you can get an idea of the structure and hierarchy in the layout. When an element like an <li>  is inside another, like a <ul>  (or the <ul>  being inside the <nav >) we call these parent elements. and the elements themselves are children. The further up in the hierarchy a specific class is, the more selective it makes the child classes, with IDs being the most selective. For example, to ensure our custom style only affects the header menu, we can combine the .nav-horizontal li  class with the .header-site  class in the <header>  element to get: .header-site .nav-horizontal li . This will be the primary selector we use to apply the hover effects.

If you expand the <li>, you will see the link tag itself, and its associated CSS styling. The a is targeted specifically to apply styling to the lettering, such as color, font and font weights.

Knowing which classes are prominent becomes a lot easier if you become familiar with the Layers framework CSS, outlined here.

Now that we know which selectors to use, .header-site .nav-horizontal li , and .header-site .nav-horizontal li a , we can being to build the styles. If you are just starting out, use CSS Tricks or the CSS3 Tutorial at W3 Schools to get familiar with common properties that can be applied to links and list item elements.

Begin by adding your selectors to the CSS field in the Customizer’s main menu. In my example here, you will see I have added the closing brackets and left a blank line inside each. This ensures the preview remains visible while  editing.

nav-css-1

 

To begin, simply give the li style a little padding:

Changing link text

 

 

To recolor the default state, I simply add a color property to the link selector (a):

My primary goal is to change how the hover and current page link appears. To do that, I use the :hover selector on the <li>  selector to give the link box a solid background color and a little padding. This suffix can be added to any CSS selector to affect that element’s hover state.

This background color is the same as the default link color, so I need to change the link’s color on hover, too, by adding a hover to the <a>  selector:

Sub-Menus

With the above four style changes, we now have a basic hover effect. If you menu has links that drop-down, you will need to apply additional styling to the un-ordered list which has the .sub-menu class. To ensure these styles override your main link styles, make sure to use the same cascade selectors. For example .header-site .nav-horizontal li .sub-menu .  This menu needs the submenu to blend with the hover state of the main link, so we need to make the background blue and reset the border by giving it a 0 value:

Finally, we need to make the sub-menu links white:

All together, this is the CSS: