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

General

  • Header layout

    Sets layout for the header. Standard, centered, split and side menu layouts are available. Each menu layout supports two menu locations.
  • Header height

    Header bar height. Add size units, e.g., 100px
  • Header background color

    Sets background color for header.
  • Sticky header

    Makes header sticky when you scroll. Smart and standard type are available.
  • Header type

    Choose between overlay or standard header type. Overlay header is absolute positioned and will stay on top of the background.
  • Full width header

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

    Ads bottom shadow line to the default header.
  • Search button in menu

    Enables or disables search from menu.

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 150x30, retina logo size will be 300x60.
  • 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

As an alternative, double sized or bigger logo can be added as a standard logo without adding a separate retina logo. In this case make sure to set width and height to actual display size, i.e. if logo display size is 150x30, image size should be 300x60.

Overlay Header

  • 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 150x30, retina logo size will be 300x60.
  • 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

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 header background color

    Choose background color for mobile header.
  • Mobile menu toggle and header text color

    Choose color for mobile menu toggle icon and other content in mobile header.
  • 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 150x30, retina logo size will be 300x60.
  • 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
  • Show body top sidebar on mobile devices

    If activated, the Body Top Sidebar from Appearance/Widgets will be displayed on both desktop devices. By default only special Mobile Body Top Sidebar is displayed if present.

Meta Logo

  • Logo image for Google AMP

    This image is used in structured data and is displayed in rich search results. The logo should be at least 112x112px.