Background color of header not changing when edited

[444media]

A while back I got some code from support here (pasted below) that enabled the Slider Revolution hero image to go all the way to the top of the page, and have the header be transparent so the logo and menu would appear over the image. Worked great on that site. In trying to do it on another site, it is working for the most part, but when I scroll down I want the background color of the header to change. Previously it was: background-color: rgba(38,38,38,0.95) !important; But now I want to change it to something like rgba(248,248,248,0.75). But when I adjust the rgba numbers, the color and opacity stays the same on the site (a slightly opaque black).

I have cleared the browser cache, the style cache within the theme and the website cache. Tried looking at it in other browsers, and no change. I even went back to the other website where I originally used this CSS, changed the background color there and it worked fine, the color of the header changed. But this site, with the same code and settings, won’t change. I even deleted the entire CSS, saved it, logged back out, then back in and re pasted the code, and still same issue. The header remains a slightly opaque black. I want to see what a light grey or white looks like.

The page is located at cityrockpartners.com/home

I have changed the background color of the header (when you scroll down) to: rgba(248,248,248,0.75) This is a light grey. When you visit the site, it will be black when scrolling down.

Here’s the code (with the original color background, that now I want to change):

@media (min-width: 980px) {
.x-logobar {display: none;}
}

/hide the logo from the mobile menu/
@media (max-width: 979px) {
.x-nav .menu-item-41 {display: none;}
}
.masthead.masthead-stacked {
position: absolute;
left: 0;
right: 0;
top: 0;
}
.x-navbar {
border-bottom: 0;
box-shadow: none;
}
.x-nav-trans {
background-color: rgba(38,38,38,0.95) !important;
}

[ruenel]

Hello There,

Thanks for the very detailed post information. I have inspected your homepage and I noticed that you have a duplicate JS code. Please remove this code from your Theme Options > Custom JS section first;

jQuery(function($){

$(window).scroll(function(){
if( $(this).scrollTop() != 0 ) {
   $('.x-navbar-fixed-top').addClass("x-nav-trans");
}else{
   $('.x-navbar-fixed-top').removeClass("x-nav-trans");
}
})
});

This code is best if added in Cornerstone’s custom JS section so that this will only be applied to your homepage. If you want this effect globally then you will have to remove this code in Cornerstone’s custom JS section and place it in Theme Option’s custom JS instead.

And lastly, you will need to updated your custom css into this:

@media (min-width: 980px) {
.x-logobar {display: none;}
}

/*hide the logo from the mobile menu*/
@media (max-width: 979px) {
.x-nav .menu-item-41 {display: none;}
}
.masthead.masthead-stacked {
position: absolute;
left: 0;
right: 0;
top: 0;
}
.x-navbar {
border-bottom: 0;
box-shadow: none;
}
.x-nav-trans {
background-color: rgba(248,248,248,0.75) !important;
}

After making site changes, if you have a caching plugin or your server has a caching features, you must flush or clear the cache first before testing the site again.

Please let us know how it goes.

[444media]

Hi RueNel

Thanks for your detailed help here. So…

1. I removed the JS script, but am unclear where I should put it now as I do want it to be affected globally. I remember before when I was trying to achieve this, it was only on the home page, then someone had me at that JS and then it worked across the entire site, which is what I want here. But where I had the JS added to this site before was in the Theme Options custom JS section. I don’t believe I had it just applicable to Cornerstone, as you memtioned. I went to Theme Options, then clicked the small JS in the bottom left corner of the screen and added the JS.

2. I removed the JS script and added the CSS as above, but now there is no opaque header when scrolling down. It is completely transparent. I even changed the rgba to something darker than white, and it is still just totally transparent. I need some opaque background to the header when scrolling down so the logo and menu items can be seen.

3. When I add the JS back to the custom JS section in Theme options, I’m back to the original problem I wrote about…getting a black opaque header background when scrolling down.

Thanks for your additional help!

Chris

[Alaa]

Hi Chris,

It’s fine to have this code in (X > Theme Options > JS), I’ll quote this from @RueNel previous reply:

If you want this effect globally then you will have to remove this code in Cornerstone’s custom JS section and place it in Theme Option’s custom JS instead.

Just don’t have it in too many places, just one place only.

Now, when I checked your homepage source code, I noticed that you have this JS code:

/jQuery(function($){

$(window).scroll(function(){
if( $(this).scrollTop() != 0 ) {
   $('.x-navbar-fixed-top').addClass("x-nav-trans");
}else{
   $('.x-navbar-fixed-top').removeClass("x-nav-trans");
}
})
});/

Both slashes / at the beginning of the code and at the end of the code are breaking the JS code, so please remove them and recheck this issue.

If you still can’t figure out what’s going on, then please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

[444media]

Hi Alaa,

Thanks for getting back to me so quickly. I feel like I am only adding the JS to the theme options section…not anywhere else…as I wouldn’t even know where else to add it.

I also removed the first / and the last / and added the JS to the theme options JS section, and now back to the same original issue.

So I just added a user for you to access the back end and sent as a secure note.

Thanks!

Chris

[nabeel]

Hi again,

Thank you for the credentials. I checked your setup and you still had both JS and CSS codes in Cornerstone’s JS and CSS section. I went ahead and commented out the code from there as they had syntax errors then I flushed the cache and everything seems to be working fine now.

Always make sure to clear the cache after making any change so you can see your changes on the front-end right away. Now clear your browser’s cache and test the site.

Cheers!

[444media]

Great! Thanks you so much!

I am still a bit confused as to where custom CSS and JS should go them when I want it affected globally. As I mentioned, I went to the Theme Options (under the X section of the dash) section and did it there. But you’re saying that I had it in Cornerstone’s JS and CSS section. I’d just like to understand for future reference.

Thanks so much!

[nabeel]

Hi again,

You had placed the JS and CSS correctly in Theme Options for the global effect but you didn’t remove the codes from Cornerstone’s JS and CSS section.

For future reference, if you need any code globally, just add it in Theme Options > CSS or Theme Options > JS and If you need code specific to the page then you can use Cornerstone’s JS and CSS section

Hope this helps!

[444media]

OK…so then where is Cornerstone’s JS and CSS section? The only section that I am familiar with adding CSS and JS is under theme options where I had done it. I’m not quite sure how I added it to Cornerstone’s JS and CSS section…guess I am just not remembering where I did that, sorry.

[nabeel]

Hey there,

If you edit your page in Cornerstone, you’ll see the JS and CSS section on the left bottom side of the screen (see screenshot) that’s for the page specific customization. It will not have the global effect.

Hope this helps!