Customizer – Header Settings

You are here:
Estimated reading time: 3 min

These options can be found in Customizer > Header panel eg: https://d.pr/i/cxQqYV .

General

Layout

Choose a header layout. In this list you will find all the header layouts (or disable the header). The list is automatically filled with header global sections .

Custom header width

Customize the header’s width. Normally the header is sized the same as the container (that can be changed in General settings > Layout settings > Container width ).

If you’re planning on using a global section header, you should simply adjust the header’s width there in Elementor’s global section mode.

Header Height

Customize the header’s height. If you’re planning on using a global section header, you should simply adjust the header’s height there in Elementor’s global section mode.

Background color

Change the header’s background color.

Text color

Change the header’s text color.

Header position

Change the header’s position. The options are:

  • Relative (default)
  • Absolute. It will be positioned over the content.
  • Fixed. It will be positioned over the content and sticked to the site top edge, on scroll.

Try using absolute & fixed on individual pages.


Logo

Choose the logo that will appear in the header. Try using SVG images, they’re vectorial and don’t lose quality on any screen.

Mobile Logo

Choose the logo that will be shown on mobile devices (smaller screens). If none is provided, the normal logo will be shown.

Is the logo not changing?

That’s likely because the site has a Header Global Section assigned, and the Logo Element inside it, is overriding the Customizer’s settings. Find out what header is assigned to the site/page by hovering over the Elementor Templates in the admin bar eg: https://d.pr/i/ovgnbc . Open it and now you can edit the Logo element’s options eg: https://d.pr/i/pS5Yxt .


Enable search

Enable or disable the header’s search entire functionality and form.

Search style

Change the style of the search:

Background color

Change the panel’s background color.

Text color

Change the panel’s text color.

Suggestions content

Choose a complementary content next to the search form:

  • Menu. Will display a simple menu.
  • Keywords suggestions. Will display a list of keywords that upon click will fill the search form.

Search menu source

Choose a menu to display under the search form. To create one, head over to Appearance > Menus .

Keywords

Add keywords separated with commas. They’ll be displayed as a clickable inline navigation, that upon click will fill the search form.


Note: To add the main menu navigation, please create a new Menu in Appearance > Menus and check the “Main menu” location, at the bottom of the page.

Breakpoint for mobile navigation

Choose at what point of the browser (viewport) width, the menu needs to switch to mobile – hamburger icon + side panel navigation.

You can choose up to 2560px, but no less than 768px.

Mobile menu source

Choose the mobile menu source. You can create a new menu in Appearance > Menus with any menu items you want, personalised for a better mobile experience.

If no menu is specified, the fallback will be the normal “Menu menu”.

Typography for 1st level

Customizes the typography looks of the 1st level menu items, as well as color.


Account

Enable “My Account” panel

Choose if you want to display the “Account” button and panel from the Header. This panel is designed to hold the registration form, login form (if WooCommerce is enabled) or Wishlist if the TI Wishlist plugin is enabled.

Type of button

Basically the style of the button. Either a custom text or a simple icon. On mobiles it automatically switches to icon.

Button text label

In case you choose Text as type, you can customize the text.

Enable wishlist

Choose if you want to enable Wishlist products in this panel. Please know that TI Wishlist plugin is required. Read more how to install plugins.

Hide on mobiles

Enabling this option, will force this button and panel to be hidden on mobiles (768px and less).


Shopping cart

Choose if you want to enable the header’s shopping cart button and panel.

This panel will only be shown if WooCommerce is installed and active.

Was this article helpful?
Dislike 0
Views: 51

Join the conversation