Customizing header logo for one page navigation

Hi there!

I have successfully used the following thread to create a unique main nav for just one page of my site: https://theme.co/apex/forum/t/different-menu-for-front-page-and-rest-of-site/6770/2

However, I can’t figure out if there is also a way to change the logo in just this unique main nav. Is there a simple way to do this?

Thank you!

Hi there,

Thanks for writing in! You can do it with custom JS. First get the ID of your page where you want to change the logo https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59 then add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$(".page-id-45 .x-brand img").attr("src", "http://your/new/logo.jpg");
});

Just change the page ID and logo image URL in the above code.

Hope this helps!

Thank you, that worked! However, I can’t figure out how to make the new image larger. I’ve tried uploading a larger file and using that link, but it stays tiny in the header. Is there a specification I add in the java code you provided?

Thanks again for your help!

Hi There,

Please update the previous code to this:

jQuery(document).ready(function($){
	$(".page-id-45 .x-brand img").attr("src", "http://your/new/logo.jpg");
        $(".page-id-45 .x-brand img").css("width", "150px");
});

Let us know how it goes!

That worked perfectly, thank you! I appreciate your help.

1 Like