Header & Navbar

Customize the header and navigation bar of your site.

The header and its elements are visible on every page. These header and navbar settings apply to desktops and larger devices. All settings for the mobile version can be found in the Mobile Header documentation.

The following settings can be found in the Layout → Header panel of YOOtheme Pro.


Header Layout

Positions

Prepared header layouts define the position of logo, navigation and search. The header layouts consist of three visual positions: logo, navbar and header.

Position Color Description
Logo Black This position displays the logo.
Navbar Green This position displays the navbar itself as well as the navbar widget area.
Header Purple This position displays the header widget area.

Note You can select whether the social icons and the search show up in the navbar or header position. Learn how to publish a widget on the navbar or header position in the Widgets documentation.

Horizontal Layouts

The logo as well as the navbar and header positions are displayed side by side, from left to right with different alignments.

Horizontal Left

Horizontal Left

Horizontal Center

Horizontal Center

Horizontal Right

Horizontal Right

Horizontal Center Logo

Horizontal Center Logo

Stacked Center Layouts

The logo as well as the navbar and header positions are displayed above each other and are centered horizontally. In the Stacked Center Split layout the navbar is split, and the logo is placed in the middle.

Stacked Center A

Stacked Center A

Stacked Center B

Stacked Center B

Stacked Center Split

Stacked Center Split

Stacked Left Layouts

The logo as well as the navbar and header positions are displayed above each other and are aligned on the left side. In the Stacked Left B layout the navbar is left-aligned, while the navbar position is right-aligned.

Stacked Left A

Stacked Left A

Stacked Left B

Stacked Left B

Offcanvas Layouts

The logo is left-aligned, and the menu toggle is right-aligned. The header area is on the left from the menu toggle while the navbar area is displayed in the offcanvas menu. It opens when clicking the menu toggle.

Offcanvas Top A

Offcanvas Top A

Offcanvas Top B

Offcanvas Top B

Offcanvas Center A

Offcanvas Center A

Offcanvas Center B

Offcanvas Center B

The logo is left-aligned, and the menu toggle is right-aligned. The header area is on the left from the menu toggle while the navbar area is displayed in the modal menu. It opens when clicking the menu toggle.

Modal Top A

Modal Top A

Modal Top B

Modal Top B

Modal Center A

Modal Center A

Modal Center B

Modal Center B

Offcanvas and modal layouts also offer an option to center the logo so it is not left-aligned.

Center logo


Max Width

Set the maximum content width for the header and navbar using the Max Width setting. The Default, Small, Large and Expand options add a horizontal padding which adjusts to the viewport width. Additionally, the logo padding can be removed for layouts where logo is positioned on the left.

Max width


There are three options available to control the navbar position and its behavior.

Setting Description
Static The navbar will move out of the viewport on scrolling.
Sticky The navbar will stick at the top of the viewport on scrolling.
Sticky on scroll up The navbar will move out of the viewport when scrolling down, and it will become sticky on scrolling up

Navbar options

Note If you have a transparent navbar, the Sticky navbar will show up once you have scrolled bellow the hero section, and it will hide when the hero section comes into the viewport.

For more information on general options for the menu displayed in the navbar please have a look at the Menus documentation page.

Images

You can add an icon or an image to your menu items via custom CSS. In the WordPress Menus panel open the Screen Options in the top right and enable the CSS Classes checkbox. Add a custom CSS class to your menu items. After that, open the customizer and define the CSS classes added to the menu items in the CSS/LESS field in Settings → Custom Code.

Subtitles

Add a Subtitle to your navbar item in the Navbar Items panel. The subtitle will be shown beneath the item's title.

Subtitles


Alignment and Behaviour

The dropdown menu will be displayed for horizontal and stacked layouts. There are a few options available to align the dropdown and to enable the click mode for text items.

If the alignment of the dropdown does not fit into the viewport, it will be flipped automatically.

Option Description
Alignment Align the dropdown to the left, right or center in regard to the navbar item.
Align to navbar Align the dropdown to the navbar container instead of the navbar item.
Click mode Navbar items which contain only text (without a link) can show the dropdown on click instead of hover.

Dropdown options

Learn how to create a text menu item in WordPress.

Columns and Width

Since navbar items may have a different number of submenu items, the options to split the dropdown into columns and to set a width are available for for each navbar item in the Navbar Items panel.

Option Description
Columns The dropdown will be split into the defined number of columns.
Width Expand the dropdown width to the navbar boundary.

Columns and Width

Dropbar

The dropbar converts the classic dropdown to a full-width section that can either Slide down on top of your content, or Push the content down.

Dropbar options

Note The Push option behaves the same as Slide if a transparent overlay header is enabled.


Offcanvas Layout

There are a few options available to style and align the offcanvas menu.

Option Description
Menu Toggle Show the Menu text next to the hamburger icon.
Menu Style Choose between the Default menu and the Primary menu with a larger font-size.
Alignment Center the menu and the content in the offcanvas bar horizontally.

Offcanvas layout

Offcanvas Mode

Choose between Slide, Reveal and Push offcanvas modes. Additionally, you can overlay the site with the background color to prevent from scrolling and navigating the page when the offcanvas bar is open.

Option Description
Slide The offcanvas bar slides on top of the page content.
Reveal The page content moves out of the viewport revealing the offcanvas bar underneath it.
Push The offcanvas bar pushes the page content out of the viewport.

Offcanvas mode


There are a few options available to style and align the modal menu.

Option Description
Menu Toggle Show the Menu text next to the hamburger icon.
Menu Style Choose between the Default menu and the Primary menu with a larger font-size.
Alignment Center the menu and the content in the modal horizontally.

Modal layout


Search Position

As described in the Header Layout section above, you can choose to display the search either in the navbar or the header area.

Search position

Note This is a shortcut that publishes the search on these positions. You can also publish a search widget on any available theme position.

Search Style

Choose between the Default and the Modal search style. The Modal style only displays an icon, and the actual search will appear in a fullscreen modal on click. As a result, this style is not available for the offcanvas and modal header layouts.

Search style


Social Icons

As described in the Header Layout section above, you can choose to display the social icons in the navbar, header, toolbar-left, or toolbar-left areas.

Add up to five social profile links via Edit Links so that icons can be displayed. A corresponding UIkit brand icon will be displayed automatically if available. There are also automatic icons for the email address, the telephone number and Google Maps.

Setting Description
Brands Enter the link to your social media profile.
Email Enter the link to your email address by using mailto:.
Telephone Enter the link to your phone number by using tel:.
Map Enter the link to Google Maps.

Define if the links should Open in a new window and whether to Display icons as buttons.

Social icons

YOOtheme Pro