Different logos for different menu versions

  • Author
    Posts
  • #150068

    eleanornudge
    Member

    Hello,

    Can you please tell me how to have a white version of my logo in the top menu, then switch to the coloured version of my logo in the menu once the page has scrolled down?

    I found this information helpful, but only for adding one version of the logo:
    https://premium-themes.forums.wordpress.com/topic/logo-in-place-of-site-title/

    I can see that these people managed to have the two different versions of their logos:
    https://example133628313.wpcomstaging.com

    I would like my logo to be like that.

    Many thanks!

    The blog I need help with is nudgeinsights.com.

    #150080

    tarasdashkevych
    Theme Author

    Hello,

    By default, WordPress allows to upload only one logo per site but we can use a custom CSS to add an alternative logo. We have posted a solution here: https://premium-themes.forums.wordpress.com/topic/logo-colour/#post-117708

    If you need help with the custom CSS then I will be happy to help you. Currently, your site does not display a logo. Could you please upload a main version of the logo to the site and post a link to an alternative logo? So, I can create a custom CSS for you.

    Thank you,
    Taras

    #150434

    eleanornudge
    Member

    Hi Taras,

    Thank you so much for your reply.

    I have added a main logo to my site now, and would appreciate support with the alternative logo.

    Here is a link for our alternative logo:

    https://nudgeinsights.com/wp-content/uploads/2019/12/Nudge_RGB-Orange-Alt_Master.png

    Many thanks!

    #150452

    tarasdashkevych
    Theme Author

    Hello,

    Please use this custom CSS to change your primary logo to alternative:

    
    @media (min-width: 768px) {
    	.site-header:not(.scroll-header) .site-logo {
    		display: none;
    	}
    
    	.site-header:not(.scroll-header) .site-logo-link {
    		display: inline-block;
    	}
    
    	.site-header:not(.scroll-header) .site-logo-link:after {
    		background-image: url( https://nudgeinsights.com/wp-content/uploads/2019/12/Nudge_RGB-Orange-Alt_Master.png );
    		background-size: 300px 60px;
    		display: block;
    		width: 300px;
    		height: 60px;
    		content: "";
    	} 
    }
    

    You can also modify the height (60px) and width (300px) for your alternative in the custom CSS.

    Hope this helps. Please let me know if you have any additional questions.

    Thank you,
    Taras

    #150454

    eleanornudge
    Member

    Hi Taras,

    This is absolutely perfect, thanks so much!

    I like the look of my logo at a smaller size (40px and 200px), could you please help me with the CSS code to change my main logo to this size?

    Many thanks!

    #150462

    tarasdashkevych
    Theme Author

    Not a problem. I am glad I was able to help :)

    Sure, I can help! Please use this custom CSS:

    
    .site-branding .site-logo {
      max-width: 200px;
    }
    

    Thank you,
    Taras

    #150465

    eleanornudge
    Member

    Thank you!!

    #150469

    tarasdashkevych
    Theme Author

    You are very welcome! :)

The topic ‘Different logos for different menu versions’ is closed to new replies.