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 module position.
Header Purple This position displays the header module position.

Note You can select whether the social icons 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

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 position is on the left from the menu toggle while the navbar position 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 position is on the left from the menu toggle while the navbar position 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

Layout Settings

There a few options for the navbar depending on the chosen header layout.

Setting Description
Full width header By default the header is constrained to the container width, but it can also take up the full width.
Remove left logo padding The logo padding can be removed for layouts where logo is positioned on the left.
Center the logo Center the logo so it is not left-aligned. This option is available for offcanvas and modal layouts.

Layout Settings


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

Add an image to your navbar item in Joomla's Edit Menu Item view. Click the Link Type tab and select the Link Image option to pick an image. It will be shown on the left of the navbar item. For more information, take a look at the Joomla documentation.

Images

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 separators.

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 Joomla.

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 position.

Search Position

Note This is a shortcut that publishes the search on these positions. You can also publish a search module 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 positions.

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