The Header Options Section is one of the most important sections within the Theme Options Panel. Here, you will be able to define your site layout, set the design for your header, pick your own logo and many more things.

Layout↑ Back to Top

The layout section is pretty straightforward. Most options are image pickers, so you can actually have an idea of what you are currently setting based on the options you are picking.

• Navigation Style: You can choose from these different options:
  • Top: The most common type of layout, the logo and navigation menu will be placed at the top of the screen. When selected you will be able to pick the following:
    • Navigation Alignment: Left, Centered, Right, Centered Logo, Centered Inline Logo.
    • Full-Width Header: You can choose if you want your header contents to be full-width.
  • Side: The side navigation will define your site layout with your logo & navigation on the side of your website, and your content besides.
  • Overlay: This type of navigation will use a hamburger icon that when being clicked will display a full page overlay with the navigation menu.
• Layout Type: You can pick between having a full-width layout (default) or a boxed layout.
• Sidebar Position: Pick the default sidebar position. This can be overridden in a post/page basis later on.

Design↑ Back to Top

On this section, you can basically choose the style for your Header & Navigation.

• Header Skin: You can pick from two options: Light or Dark. This will apply for both logo and navigation.
• Header Background Color: Choose the header background color from your color palette.
• Header Background Image: Upload or select an image from the Media library if you want your header background to use an image. If you upload/select an image you will be able to set some properties like Image Repeat & Position.
• Transparent Header: You can define if you want your header to have a transparent background.
• Overlay Skin: The overlay is shown when the Overlay navigation is selected, or when the search button is triggered (among other situations). You can choose two predefined skins (light/dark) or define your own.
• Header Border: Check this option if you want to add a semi-transparent border at the bottom of the header.
• Header Shadow: Add shadow to the header.

Logo↑ Back to Top

Picking your own logo is one of the main parts of giving your website a unique look. We have covered all the differen possibilities for you to have more than one logo and different options.

• Text-Based Logo: If you don’t want to use an image and you prefer to use just the name of your site/company as the logo, you can check this option. If checked, you will be able to pick the font and style.
• Custom Logo: Upload/Select an image from the media library to be used as your website logo.
• Custom Logo (Retina): Upload/Select an image from the media library to be used as your website logo in high-resolution devices.
• Custom Logo (Dark Skin): Upload/Select an image from the media library to be used as your website logo when having a dark skin header.
• Custom Logo (Dark Skin, Retina): Upload/Select an image from the media library to be used as your website logo when having a dark skin header in high-resolution devices.
• Hide Logo: This option will hide the logo when the page is loaded, if the header animation is set to “fixed”, then it can appear when the site is scrolled.
• Hide Logo On Mobile Viewports: By clicking this option you will hide the logo on mobile viewports.
• Logo Height: Set the height of your logo, in pixels.
• Custom Logo (Mobile Only): Upload/select a custom logo for mobile viewports, if wanted.
• Custom Logo (Mobile Only, Retina): Upload/select a custom logo for mobile viewports when using a dark skin header, if wanted.
• Custom Logo (Dark Skin, Mobile Only, Retina): Upload/select a custom logo for mobile viewports in high-resolution devices when using a dark skin header, if wanted.
• Logo Height (Mobile Only): Set the mobile logo height, in pixels.
• Logo Padding (Mobile Only): Set the logo padding for mobile viewing.

Animation↑ Back to Top

This section will let you can create stunning animations and effects for your header/navigation.

• Fixed Position Header: By clicking this option your header will stay fixed to the top of your page when scrolling down.
  • Hide Logo: By clicking this option you can hide your logo when the header is fixed.
  • Shrinking Header: When selected, it will create a shrinking effect when scrolling.
  • Hide Header Until Scroll: By clicking this option the header will be hidden until the page is scrolled.
  • Auto-hide header: By clicking this option the header will hide when the user scrolls down and it will appear once he scrolls up trying to look for the header/navigation menu.

NOTE: Most of the options in this section will only be available for the horizontal and overlay header/navigation layouts.

Navigation Menu↑ Back to Top

This section will let you set different styles for the navigation menus & submenus.

• Navigation Sub-Menu Content Skin: Pick the navigation submenu content skin. You can pick between dark (default) and light.
• Uppercase Menu Items: By clicking this option you navigation menu items will be uppercased.
• Uppercase Submenu Items: By clicking this option you navigation submenu items will be uppercased.
• Hide Arrows Indication Submenus: By ticking this option the arrows indicating submenus will remain hidden.
• Remove border from Submenus: By ticking this option you will remove the colored border from submenus.
• Hide Mega Menu Separators: By clicking this option you will hide the Mega Menu dividers.

Top Bar↑ Back to Top

The top bar is a section that can be enabled and will be at the top of the screen. This section is often used to have links for users to sign in, sign up or contact.

• Display Top Bar: This option will enable the Top Bar. If enabled you will have the following options:
  • Top Bar Padding: Select the top bar padding in pixels.
  • Fixed Position Top Bar: By clicking this option you can fix the top bar at the top of the page when scrolling.
  • Top Bar Background Color: Select the background color from the color palette.
  • Top Bar Skin: Pick the Top Bar Skin, available options are light or dark.
  • Top Bar Left Content: Insert content to be displayed in the left part of the top bar. (*)
  • Top Bar Right Content: Insert content to be displayed in the left part of the top bar. (*)

(*): When using WooCommerce you can use the following shortcodes to display links: [login], [logout], [signup] and [my_account].

[login] & [signup] will only display when the user is not logged in. The same logic applies to [logout], it will only display if the user is logged in (as well as [my_account])

There’s also the possibility to add a navigation menu to the top bar. You can create a navigation menu and assign it to the “Top Bar” location.

The top bar, at the top of the screen with a dark background.