Change Logo on Different Pages

Support
#1

Hello. I am needing a little help tweaking some code to accomplish what I am thisclose to getting done on the site. Overall, I have the header set up so that it is transparent and the slider fits beneath it. On scroll, the header turns solid. Works perfectly. However, on certain pages, for example “portfolio items” I would like to have a solid white background, no scroll, with a blue logo, as opposed to a white logo. Piecing together some code, I was able to get the blue logo on the white background and change the color of the links. However, when I scroll down, it turns back to white.

Here is the code I have so far:

jQuery(function($) {
$(window).scroll(function() {
if ($(window).scrollTop() > 400) {
$(’.x-navbar’).addClass(“x-navbar-solid”);
$(’.x-navbar a’).css(“color”, “#000”);
$(’.x-brand img’).attr(‘src’,‘BLUE-LOGO-URL’);
$(’.mobile’).css(“background-color”, “transparent”);
} else {
$(’.x-navbar’).removeClass(“x-navbar-solid”);
$(’.x-navbar a’).css(“color”, “#fff”);
$(’.x-brand img’).attr(‘src’,‘WHITE-LOGO-URL’);
$(’.mobile’).css(“background-color”, “rgba(0,0,0,0.95)”);
}
});
});

jQuery(".single-x-portfolio .x-brand img").attr(“src”,“BLUE-LOGO-URL”);

jQuery(".single-x-portfolio .x-navbar a").css(“color”, “#909090”);

#2

Hi there,

Try adding this CSS code instead:

.single-x-portfolio .x-navbar {
    position: relative !important;
    background-color: #909090;
}

Here are some reference links related to the suggestions above:

Hope this helps.
.

#3

The logo and text still turn white upon scrolling.

#4

I’ve also already tried replacing the logo with CSS but it just overlays the blue logo on top of the white logo.

#5

Hello @design310,

Thanks for updating the thread.

I tried checking the website listed in your licence manager page and it seems that you have activated under construction page. Can you please share credentials in a secure note for us to take a closer look?

Thanks.

#7

Hi @design310,

It’s kind of weird, it’s not working but when I added the script through browser console, it starts working. Could you try it again now? It’s now working without any direct changes.

Thanks!

#8

Hello,

Still not working on my end. I cleared cache and tried with both Safari and Google browsers. On both, the logo and link color turns white (looks like it disappears) after scrolling. It appears in color initially, but when you go down on the page and go back up, it reverts. Could there be something in the jQuery code causing this on scroll on the portfolio item page?

#9

Hi There,

I’ve updated the custom JS to this and everything is working fine now:

jQuery(function($) {
	$(window).scroll(function() {
    
    if( $("body").hasClass("single-x-portfolio") ) return false;
    
		if ($(window).scrollTop() > 400) {
			$('.x-navbar').addClass("x-navbar-solid");
      $('.x-navbar a').css("color", "#000");
      $('.x-brand img').attr('src','https://www.legacybuildersandmaintenance.com/wp-content/uploads/2018/08/BLUE-Legacy-Logo.png');
      $('.mobile').css("background-color", "transparent");
		} else {
			$('.x-navbar').removeClass("x-navbar-solid");
			$('.x-navbar a').css("color", "#fff");
      $('.x-brand img').attr('src','https://www.legacybuildersandmaintenance.com/wp-content/uploads/2018/08/Legacy-Builders-Medium-Logo.png');
      $('.mobile').css("background-color", "rgba(0,0,0,0.95)");
		}
	});
});

jQuery(".single-x-portfolio .x-brand img").attr("src","https://www.legacybuildersandmaintenance.com/wp-content/uploads/2018/08/BLUE-Legacy-Logo.png");

jQuery(".single-x-portfolio .x-navbar a").css("color", "#909090");

Hope that helps and thank you for understanding.

#10

Works. Thank you so much!

#11

You’re more than welcome, glad we could help.

Cheers!

#12

Hello again,

I’m having another issue, which falls closely in line with this one, that I’m hoping you can also help with. I’ve tried several different ways to accomplish this on my own, and I must just be missing something because nothing is working.

On the home page, the links appear as I want them to. The menu items have a font-weight of 300 (I believe.) On hover, it has a font-weight of 700. Which is how I want it to look.

However, (keeping in mind the code added above) on the main portfolio page, the font-weight is 700 in it’s normal state and I can’t seem to be able to change it to make it less. The font-weight should only be 700 when it is hovered over or active. On scroll, the active menu item turns white which makes it look invisible. This page should be exactly how it is on the home page, but it isn’t. (Page referring to: https://www.legacybuildersandmaintenance.com/portfolio/)

On the single portfolio page, I have the same issue. I can’t change the font-weight. (Page referring to: https://www.legacybuildersandmaintenance.com/portfolio-item/white-fireplace/)

I have inspected the elements several times and can’t find what needs to be changed.

Any thoughts? The site is currently under construction, so will need to access as admin. I have provided login access in this thread. (I don’t see it, so if you need it again, I can provide.)

Thanks in advance for your help.

#13

Hello There,

Since you site is under construction mode, we cannot check the portfolio page at the moment. Could you please provide us access so that we can take a closer look at your code?

Thank you in advance.

#14

Here you go.

Thank you.

#15

Hi @design310,

It’s kind of weird, toggling on and off the font family in browser’s inspector fixes the rendering. But, could you try setting the font family to Lato instead of Raleway? Seems it looks the same when the selected font is Lato.

Thanks!

#16

If I go to Theme Options -> Typography -> and change the font family from Raleway to Lato, on the Single Page Portfolio, the font continues to have a weight of 700, but it doesn’t disappear on hover. It has no effect on the other pages. They continue to have the same issues.

I went into the css, and on the section that had Raleway as a font-family, I removed, and it seems to have done the trick. The font-weight issue is fixed.

Whew! So, the only problem remaining, (as far as I can see) is that when I scroll on the pages (not home or single portfolio page), the active menu item turns white. I need to make this black. When I make it black, it changes the color on the fixed menu. This works correctly on the home page, but not on this page.

#17

Hi @design310,

I see, in that case, you can implement this CSS as well,

.x-navbar-solid .desktop .x-nav > li.current-menu-item > a > span {
    color: #000 !important;
}

Hope this helps.

#18

Yes! It does. Thank you sooo much!

#19

You’re most welcome!

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.