The Topbar can be enabled or disabled to achieve your design goal. Once enabled you will be able to edit the settings and customize the background color, spacing, typography, elements alignment and add a border as well.
When enabled, the topbar becomes a widget area where you can add custom widgets.
You can configure widgets from Appearance > Widgets.
The menu Header layout and style includes four submenus, where you can configure every part of the header.
Choose the layout of the header and the position of the site logo and navigation in it.
Available options:
Spacing: here you can set up a custom spacing value (in pixels) for every side of the header
Enable full width header: this option is very useful if you want to achieve a particular wide layout for your website (for example when using full width editor blocks to display page contents).
Here you can enable the icons that quickly link to:
They will show up on the right side of the header as quick links for your users.
Enable this option to show the Header widget area on the top right corner, next to the active icons if enabled. You can configure widgets from Appearance > Widgetsor from the Customizer > Widgets.
Here you can customize the style of the header menu:
Enable this option to add a fancy modern look to your website and let the header stick to the page even when the user scrolls down. You can give it a different look when you scroll down the page.
You can change:
For example you can change the background color opacity, so the user can see through it when scrolling down the page.
You can also customize the header background with your own image.
Recommended size: 1920 × 250 pixels — for a perfect fit, you’ll be able to crop your image once uploaded.
If you add more than one image and enable the Randomize option, the images will be randomly loaded every time that the page is refreshed.
