GET REY

Customizer – Header Settings

You are here:
Estimated reading time: 3 min
In this article

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

LinkGeneral

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.

Read more about Header positions.

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 .

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: 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 .

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 .

LinkAccount

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 .

LinkShopping 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: 10623

29 Replies to “Customizer – Header Settings”

  1. john

    how do i remove trends on search bar

    1. mariushoria[ Post Author ]

      Hey! If by changing the settings in Customizer > Header > Search, it means the header you’re currently using is built with Elementor and the Search element inside has the Override option enabled. Basically try to access the header with Elementor, click on the Search element and edit its settings.

      Please let me know if it worked.

      PS: will update this article first thing tomorrow morning.

  2. Marcel

    How can I adjust the header menue hoover effect e.g. on “Home”, Shop”, “Lookbook” etc. ?
    I want to have the underlining effect but if the mouse is on the term the effect is strikethrough.

    Where and how can I fix this?

    1. mariushoria[ Post Author ]

      Hey!

      This involves some custom CSS. First, please remove the hover styles you tried adding in the Elementor kit styles. I saw you made the line-height 0.1em. There will be lots of issues with this so i advise to remove it.

      Please access this link https://d.pr/n/WPHyxb and copy this custom CSS snippet and paste it into Customizer > Additional CSS .

      Marius

  3. vinay

    i am unable to see shoping cart icon, even after “Enable Shopping Cart? “, I have woocommerce installed an active still not able see the icon in the header

    1. mariushoria[ Post Author ]

      Hey Vinay,

      Maybe this article might help https://support.reytheme.com/kb/icons-are-not-visible/ . Basically might be a CDN related issue.

  4. Aidan

    My shopping Cart page is too wide for mobile.How can i fix it?

    1. mariushoria[ Post Author ]

      Hi there!

      Yes, sorry about that. I’m uploading an update in a couple of hours with its fix. Marius

  5. Peter

    How to change or set Favicon?

    1. mariushoria[ Post Author ]

      Hi Peter,

      Please access Customizer > General > Site identity. You can upload an image in there.

  6. Goh

    Hi,

    The accounts in the header bar seems not working. When I fill in with the correct login ID and Password, it just refresh the page and still can’t login. Kindly advise.

    1. mariushoria[ Post Author ]

      Hi,

      I see. Not sure why it happens. Please drop me a message here https://support.reytheme.com/new/ and create a temporary admin account for me so i can investigate what’s going on.

      Thanks!
      Marius

    2. Patrick Steadman

      I personally had this issue because of caching using plugin like wp rocket. When I added wp_woocommerce_session as a cookie it fixed things.

  7. Rachan

    Hi Marius,
    1. Parent menu item (with child sub-menu items) is not clickable when in mobile view (works only in desktop view)…is this a bug?

    2. Can thee submenu items be expanded by default on mobile view?

    Thanks.

    1. mariushoria[ Post Author ]

      Hi Rachan,

      In the Header Nav element, you should be able to find an option which can change this behavior eg: https://d.pr/i/jOYgLm to either open the submenu or go to the menu item link . A common technique is to create a new menu item, called something like “All items” and show it only on mobiles eg: https://d.pr/i/qmuzw2 , while keeping “click to open submenus” active.

      No, there isn’t any option to have the submenu items expanded by default, but it’s a great idea and i’m adding it into the next version.

      Thanks!!
      Marius

  8. Steeve

    Hi Marius,

    The header currency switcher does not work, I mean once I click on it the price still displays in € only and I can’t find anything in the knowledge base. Do I need to install a plugin for this?
    Thanks

  9. Dimitrios-Dimosthenis Tripolitis

    Hello,

    I would like to know how to edit the my account page and also the my account drop down list which shown as menu, but there is no a menu called like that.

    Thank you!

    1. mariushoria[ Post Author ]

      Hi Dimitrios,

      The My Account functionality is a built-in feature from WooCommerce and it’s non-editable. I hope in the future i will develop a new layout and ways to have more customisations. For the moment, I’ve added a feature in Customizer > Header > Account > Extra menu items where you can create new links into that Account menu, but they will link to different pages, not internal “My-Account” endpoints.

      Marius

  10. Christos

    Hi is it possible to change the buttons of the cart? Instead of
    VIEW CART button to insert a continue shopping?

    1. Marius[ Post Author ]

      Hi Christos, please try using this code https://d.pr/n/6aeO2M by adding it into the child theme’s functions.php and make sure to update the cart contents (eg: add/remove products to cart) to force flush the cart contents. Marius

  11. Stefano Monteiro

    Hi,

    How to add link to Mobile Nav follow us social?

    https://snipboard.io/c1Z4VR.jpg

    Thanks

    1. Marius[ Post Author ]

      Hi Stefano,

      Sure, here’s a quick recording https://d.pr/v/y2Uxxa . Basically try editing the Header Nav’s Mobile panel styles in which you can find the social icons.

      Marius

      1. Stefano Monteiro

        Awesome. Thanks!

  12. Philip McCaffrey

    Hi,

    I’m having issues where the mobile nav and wishlist do not appear on top of everything else. It’s like they are appearing underneath the first piece of content on every page. Any ideas how to fix this?

    1. Marius H[ Post Author ]

      Hi Philip,

      Not sure what’s going on. Please create a new ticket at https://support.reytheme.com/new/ and make sure to send me the site link and if you can, a recording url made with a tool such as loom.com in which i can see what’s going on. Thanks!

      Marius

      1. Philip McCaffrey

        Hi Marius,

        Just tried to raise a ticket but according to themeforest my support has just expired due to a delay in the project. I Will pick up again myself and see if I can figure out what is going.

        1. Marius H[ Post Author ]

          Hi Philip,

          Have you tried using this form here https://support.reytheme.com/new/ ? It should work submitting a ticket regardless if the support period has expired. Make sure to send me all details of the issue (website link and a recording with loom.com would be great) and i will look into it.

          Thanks!

  13. Shahriyar

    Hi there! Is there anyway to enable search products including variations in results? Eg. a single variation product brown and black; and “both” products appear in search.

    Thanks!

    1. Marius H[ Post Author ]

      Hey Shahriyar! Unfortunately no, sorry! It’s in my plans to develop such module in the near future. Thanks!

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!