This section controls website header parts, including menu, logo, top bar and mobile header.


 

General

  • Header height
  • Header bar height. Add size units, e.g., 70px

  • Sticky header
  • Makes header sticky when you scroll.

  • Header layout
  • This option lets you choose header layout.

  • Full width header
  • By default header is the same width as your chosen content width, it can be changed using this option.

  • Header background color
  • Sets background color for header.

  • Header shadow line
  • Ads bottom shadow line to the default header.

  • Search button in menu
  • Enables or disables search from menu.

  • WooCommerce cart button in menu
  • Enables or disables cart in menu. Only when WooCommerce plugin is active.

 

Logo

  • Logo
  • Set default logo for the website.

  • Logo (Retina version @2x)
  • Set retina logo for the website. Retina logo should be twice as big as default logo keeping the aspect ratio! For example, if standard logo size is 150×30, retina logo size will be 300×60.

  • Standard logo width
  • Enter the width of the default logo in pixels in this field. It is required for proper retina logo display. Remember to add px value in the end. Example: 100px

  • Standard logo height
  • Enter the height of the default logo in pixels in this field. It is required for proper retina logo display. Remember to add px value in the end. Example: 100px

  • Margin top
  • Move logo vertically with this option. Remember to add px value after the number. For example: 25px

 

Overlay Header

  • Detached header?
  • Detaches header from top and applies boxed style to it.

  • Overlay header background color
  • Sets background color for header. Transparent by default.

  • Sticky menu background color
  • Background color once you scrolled and menu became sticky. It should contrast menu link color.

  • Overlay Logo
  • Set logo for overlay header.

  • Overlay logo (Retina version @2x)
  • Retina logo should be twice as big as default logo keeping the aspect ratio! For example, if standard logo size is 150×30, retina logo size will be 300×60.

  • Overlay logo width
  • Enter the width of the logo in pixels in this field. It is required for proper retina logo display. Remember to add px value in the end. Example: 100px

  • Overlay logo height
  • Enter the height of the logo in pixels in this field. It is required for proper retina logo display. Remember to add px value in the end. Example: 100px

  • Margin top
  • Move logo vertically with this option. Remember to add px value after the number. For example: 25px

 

Top Bar

  • Top bar
  • Top bar appears above the header. If activated, new widget areas appear in Appearance/Widgets – Top Bar Sidebar Left and Top Bar Sidebar Right.

  • Background color
  • Background color for the top bar.

  • Text and link color
  • General text and link color for content in the top bar. Can be overridden with inline styles.

  • Link hover color
  • Hover color for links in the top bar.

 

Mobile Header

This header will displayed on mobile devices starting tablet portrait. Default mobile logo height is 70px.

  • Mobile menu background color
  • Background color for mobile menu bar.

  • Mobile menu toggle color
  • Color for mobile menu toggle icon.

  • Mobile logo
  • Set logo for overlay mobile header.

  • Mobile Logo (Retina version @2x)
  • Retina logo should be twice as big as default logo keeping the aspect ratio! For example, if standard logo size is 150×30, retina logo size will be 300×60.

  • Mobile logo width
  • Enter the width of the logo in pixels in this field. It is required for proper retina logo display. Remember to add px value in the end. Example: 100px

  • Mobile logo height
  • Enter the width of the logo in pixels in this field. It is required for proper retina logo display. Remember to add px value in the end. Example: 70px