Header & Navbar

Customize the header and navigation bar of your site.

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

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


Header Layout

Pick one of the prepared header layouts which define the arrangement of logo, navigation and search. The header layouts always consist of three visual parts: logo, navbar and header.

Position Color Description
Logo Black The logo is displayed here exclusively.
Navbar Green The navbar itself as well as the navbar module position are rendered here.
Header Purple The header module position is rendered here.

Note You can select whether the social links and the search show up in the navbar or header position.

Learn how to publish a module on the navbar or header position in the Modules 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


Stacked Center Layouts

The logo as well as the navbar and header positions are displayed above each other and 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 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, the header position is on the right, while the navbar position is displayed in an additional offcanvas menu that is opened by a click on a burger menu icon automatically added in the upper right corner. Choose whether a Menu text should appear next to this icon. Additionally, the offcanvas menu can be animated in different ways, and an overlay for the site can be activated.

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, the header position is on the right, while the navbar position is displayed in an additional modal menu that is opened by a click on a burger menu icon automatically added in the upper right corner. Choose whether a Menu text should appear next to this icon. Additionally, a style can be chosen for the menu, and centering menu and content can be activated.

Modal Top A

Modal Top A

Modal Top B

Modal Top B

Modal Center A

Modal Center A

Modal Center B

Modal Center B


Select Static, Sticky or Sticky on scroll up display of the navbar. A Static navbar will move out of the viewport on scrolling while a Sticky one will stick at the top of the viewport. A navbar set to Sticky on scroll up will move out of the viewport when scrolling down, and it will become sticky on scrolling up.

Navbar Options

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


There are three additional options for the main navigation items:

Option Description
Subtitle The subtitle is shown beneath the navbar item.
Columns The dropdown will be split into the defined number of columns.
Width Expand the dropdown width to the navbar boundary.

The Columns and Width options only have an impact if the navbar item has a submenu and the chosen navbar layout has dropdowns, i.e. is not set to one of the offcanvas or modal layouts.

Note Learn how to use an icon in a navbar item by looking at the according Joomla Docs.


Select the dropdown's alignment to the menu item or the navbar. If the dropdown sticks out of the viewport, it will be flipped automatically.

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

Dropdown Options


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.


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

The Modal style for the search only displays an icon, and the actual search will appear in a fullscreen modal on click. Obviously, this is not available for the Offcanvas or Modal header layouts.

Search Options

Note Instead of using this built-in search, you can also publish a search module on any available theme position.


Social

Select the position that will display the social icons. Add your social profile links via Edit Links so that icons can be displayed. Define if the links should open in a new window and if the icons should be displayed as buttons.

Social Options

YOOtheme Pro