These options can be found in Customizer > Header panel eg: https://d.pr/i/cxQqYV .
GeneralLayout #
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.
Read more about Header positions.
Logo #
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 .
Note: If changing these settings doesn’t update in the frontend, it means the header you’re currently using is built with Elementor as a Header Global Section and the Logo element inside has the Override option enabled eg: https://d.pr/i/dfYKVA .
Search #
Enable search
Enable or disable the header’s search entire functionality and form.
Search style
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 .
- Inline form. Simple form bar which shows an overlay and search results eg: https://d.pr/i/HTxDbt .
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: If changing these settings doesn’t update in the frontend, it means the header you’re currently using is built with Elementor as a Header Global Section and the Search element inside has the Override option enabled eg: https://d.pr/i/QAsLHP .
Navigation #
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.
Note: If changing these settings doesn’t update in the frontend, it means the header you’re currently using is built with Elementor as a Header Global Section and the Navigation element inside has the Override option enabled eg: https://d.pr/i/BvcWzw .
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).
To enable registration form, please follow this article – How to enable registration / account creation .
Note: If changing these settings doesn’t update in the frontend, it means the header you’re currently using is built with Elementor as a Header Global Section and the Account element inside has the Override option enabled eg: https://d.pr/i/PwdiRt .
Shopping cart #
Choose if you want to enable the header’s shopping cart button and panel. This