These options can be found in Customizer > Header panel eg: https://d.pr/i/cxQqYV .
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.
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.
Change the header’s background color.
Change the header’s text color.
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.
Read more about Header positions.
Choose the logo that will appear in the header. Try using SVG images, they’re vectorial and don’t lose quality on any screen.
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 or disable the header’s search entire functionality and form.
Change the style of the search:
- Wide panel. Stretched section that opens after the header bar eg: https://d.pr/i/TGilyT .
- Side panel. Vertically stretched block that opens on the right side of the site eg: https://d.pr/i/O47LXN .
Change the panel’s background color.
Change the panel’s text color.
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 .
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.
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.
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).
To enable registration form, please follow this article – How to enable registration / account creation .
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.