Header
Customize the header and navigation bar of your website.
The following settings can be found in the Basic β†’ Header panel.
By default, the Prepared Header Layouts option is enabled. If you don't want to use prepared header layout, you can disable this option and build your custom header layout by using the Layout builder.

Layout

We offer 18 predefined header layouts for your Joomla website. Prepared header layouts define the position of logo, navbar and search. The header layouts consist of three visual positions: logo, navbar/menu and header.
Position
Description
Logo
This position displays the logo.
Navbar
This position displays the Navbar itself as well as the Navbar/Menu module
Header
This position displays the header module position.

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.

Header Height

Customize the header height.
Navbar
Let the navbar stick at the top of the viewport while scrolling or only when scrolling up. There are three options available to control the navbar position and its behavior.
Option
Description
None
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
Select the navbar style for menu items.
Select the position that will display the search. You can choose to display the search either in the navbar or the header position.

Search Style

Support default and modal search style.

Social Position

Social Position
Select the position that will display the social icons. You can choose to display the social either in the navbar, header or the toolbar left/right position.
​
Option
Description
Social Icons Gap
Set the size of the gap between the social icons.
Social Icons Size
Enter a custom size for social icons.
Open in a new window
Define if the links should open in a new window.
Display icons as buttons
Define the icon links display icons as buttons.
Social icon options
Last modified 9mo ago
Copy link
Contents