Site Logo – how to change it globally, per page or per header global section

You are here:
Estimated reading time: 1 min

Logo options hierarchy

There are 3 ways of changing the logo, each one inheriting the other:

  • Globally in Customizer options
  • Per page into the page backend settings
  • Elementor “Header – Logo” element

Globally: Set the logo for the entire website

Simply change the logo globally, access Customizer > Header > Logo panel .

Per page: Override the default logo on individual pages

Screen Shot 2020-02-13 at 14.37.37.png
Simply change the Custom logo option to any image you’d want.

Per Elementor element: Override the option in “Header – Logo” element instance


Troubleshooting: Logo not changing?

If you’re editing the Customizer > Header > Logo options and uploading an image, but not seeing the changes being made, it’s likely that particular page is either overriding the logo image in its settings, or overriding the entire header with a Global section Header.

There are 2 possible causes:

Logo is overridden in page settings:

To check if this is the case, access the particular page in Edit mode and look for the “Header” tab options eg: https://d.pr/i/jgW6LR . If the page was built with Elementor, you can check these options in Page settings > Page header settings eg: https://d.pr/i/278778 .

Logo is overridden in Header Global Section

To check if this is the case, access the particular page in Edit mode and look for the “Header” tab options, but look for the Header layout list https://d.pr/i/ms4a23 and check if there’s a custom one selected, other than “- Select -“.

If there’s a custom one selected, remember its name and access Rey theme > Global Sections and locate that particular one. Open with Elementor.

Here, you can click the Logo element and see if the option called “Override settings” is set eg: https://d.pr/i/N3ruI1 . You can change the logo image here, or disable the option.

Was this article helpful?
Dislike 0
Views: 1096

6 Replies to “Site Logo – how to change it globally, per page or per header global section”

  1. Marcel

    How to change the logo settings according to your demo to the effect that the custom logo
    …changes from white to black when accessing the search field, account field, etc. and back when exiting?
    …has no box shadow when clicking on the logo?

    Thanks!

    1. mariushoria[ Post Author ]

      Hey Marcel,

      It’s bit more complicated, and the simplest way i think could be to make use of the CSS classes that are changed whenever something changes. Then, use CSS’s “filter:invert(100%);” property on the logo image.

      .header-account–active img.custom-logo {
      filter:invert(100%);
      }

      Marius

  2. Marcel

    Dear Marius,

    can you outline it in a step-by-step manual?
    Just putting the code piece into the custom CSS area didn’t work.

    Your demo Milano has the logo inverted as requested but after changing it the effect is no longer present.

    Many thanks in advance!

    1. mariushoria[ Post Author ]

      Hi Marcel,

      Just remembered there’s a custom logo in the search options at Customizer > Header > Search eg: https://d.pr/i/hPtdbl .

      To be honest it’s not the best implementation, but would get the job done.

      Marius

  3. Yin

    The logo image is linked to the homepage by default. Is it possible to remove the link? I need to remove it for my web.

    1. mariushoria[ Post Author ]

      Hi Yin,

      I see. Just modified Rey (theme’s) code a bit and added a condition that checks a filter wether it should wrap the logo with a link, or not. I’m releasing a new update, probably tomorrow and please make sure to update both Rey Theme and Rey Core plugin. After the update, please grab this code from here https://d.pr/n/Ye78px and paste it into the child theme’s functions.php . It will prevent wrapping with a link on homepage.

      Marius

Join the conversation