Header
Customize the header and navigation bar of your website.
Last updated
Customize the header and navigation bar of your website.
Last updated
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.
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
.
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.
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.
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.
Support default and modal search style.
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.
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