Topbar

Topbar

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.

topbar with widgets

You can configure widgets from Appearance > Widgets.

Header layout and style

The menu Header layout and style includes four submenus, where you can configure every part of the header.

1. Header layout

Header layout

 

Choose the layout of the header and the position of the site logo and navigation in it.

Available options:

  • Logo on the left and navigation below
  • Logo on the left and navigation inline
  • Centered logo and navigation below

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

2. Header elements

Header elements

Here you can enable the icons that quickly link to:

  • Search bar
  • Cart (either use the default one or upload a custom icon from your library)
  • User account

They will show up on the right side of the header as quick links for your users.

Header elements - icons

Show header widget area

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.

3. Header menu options

Header menu options

Here you can customize the style of the header menu:

  • font
  • weight & style
  • font size
  • text transform (uppercase, lowercase, capitalize)
  • letter spacing
  • text color
  • text color on hover
  • spacing (pixels): this is the spacing of the all the text in the header left aside the widget areas

4. Sticky header

Sticky header

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:

  • background color
  • text color
  • text color on hover
  • spacing (pixels)

For example you can change the background color opacity, so the user can see through it when scrolling down the page.

Header opacity

Header background image

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.

Header background