GET REY

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

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

LinkLogo 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

LinkGlobally: Set the logo for the entire website

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

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

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

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

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

LinkLogo 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 2
Views: 7152

9 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

  4. JJ

    Hi Mariushoria,

    I would like to change my logo link to specific link. Could you guide me how to modified Rey Themes Code? I am having a hard time looking for the specific html file in theme editor.

    I already added the filter in functions.php.

    1. mariushoria[ Post Author ]

      Hey there!

      Sure, i could help out with this one. Can you please submit a support request here https://support.reytheme.com/new/ so i can verify your purchase? Thanks a lot!

      Marius

      1. JJ

        Hi,

        I just managed to join my company a week ago. And the Technical Lead has been resigned.
        I can’t find the specific html file in theme editor as i believe they are dynamically generated. My closest bet are template-parts/header/logo.php . Look for the source code, and in the source code rey__custom_logo( $args ); is the one calling the generated code. But i failed to find the source code of this

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!