Layers Framework: Top Bar
The Top Bar, also called the Contact Header, appears when you have one or more menus assigned to one of the Top navigation locations.
For detailed information on functions, hooks and classes described here, follow the linked elements which will open in a new tab.
Primary CSS Classes
The Top Bar consists of two div wrappers, one for placement and one to control content width. Rendered in HTML they look like this:
<div class="header-secondary content-small invert">
<div class="container clearfix">
invert – is applied when the header-secondary background color is dark, and automatically adjusts content colors to retain readability.
container – is added if the Boxed option is set in the Header Layout control of the Customizer, limiting width to 1140px
The first div of the header-secondary will receive the container CSS class depending on the user’s option choice in Header → Styling under Layout, via the header-width control called with layers_get_theme_mod()
Hooks allow you to inject custom functions or HTML into a specific location in the theme without modifying the template. The following provide reference information for each hook found in this part of Layers:
By default, no depth argument is set and the header-secondary has an overflow rule of hidden. You may unregister any menu and re-register it using the same location id, to add your own arguments for things like walker classes or sub-menus. You must also include a CSS reset on the overflow for the header-secondary and child elements to ensure the drop-downs are not cut off.
Menu CSS Classes
This example shows the final rendered markup and associated CSS classes used for styling:
<ul id="menu-social" class="nav nav-horizontal">
<li id="menu-item-1916" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1916">
<a href="http://facebook.com"><span class="fa fa-facebook"></span></a>
<ul id="menu-short" class="nav nav-horizontal">
<li id="menu-item-1631" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1631">
<a href="#">Top Link</a>
Lines 1 and 8:
The pull-left and pull-right framework classes are used in the class argument of wp_nav_menu to float the menu left or right.
Lines 2 and 9:
The opening ul of each menu receives an ID, aka menu slug, based on the title you have the menu. This is combined with the following framework classes:
nav : sets link alignment, used on every nav menu.
nav-horizontal : sets position, used on all horizontal menus.
Lines 3 and 10:
The li elements are given a unique ID by WordPress, and a set of default WordPress menu classes.
Lines 4 and 11:
The link elements are not given any special classes, but are selected via nav-horizontal li a to set font and color declarations.
<i> and <span> elements are used specifically to display FontAwesome icons. Refer to the FontAwesome reference for classes and usage when extending or using FontAwesome in your themes and plugins.
The top bar is hidden on mobiles by default, as you can only really have one mobile menu and the top bar contents create too much headspace. We recommend adding elements or links that are in the top bar on desktops to the Mobile Sidebar.
Beyond what is inherently possible with CSS using the above references, the following tips may help with advanced cusotmization when changing the bar functionality is needed.
See How to Customize WordPress Menu Links Color or Style for advanced topics on adding custom classes to the li in the menus.
To add support for drop-downs, use the following reset:
Visible on Mobile
The bar is actually set to hidden by default, and then set to visible inside the responsive media queries depending on the screen size. To set the bar to visible globally, use:
You will need to make additional considerations for the height of the bar – this should only be done when using a single menu, for example, to provide functionality you need to be visible beyond the mobile toggle.
See How to Add Search to Header and apply using a top bar hook etc.