Layers Framework: Top Bar

Layers Framework

Since: 1.0 Last Updated: for: 1.2.15 Time to Read: 3 minutes

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.

contact-header

partials/header-secondary.php

The Top Bar consists of two div  wrappers, one for placement and one to control content width. Rendered in HTML they look like this:

Reference:

.header-secondary

.content-small

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:

The Top Bar calls two menus using the wp_nav_menu function, one for each registered top menu location: layers_secondary_left  (Top Menu Left) and layers_secondary_right  (Top Menu Right)

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:

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.

Drop-down support

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.

Add Search

See How to Add Search to Header and apply using a top bar hook etc.