Sticky Header background colour changing on scroll

[sarammog]

Hi

I set up a sticky header in pro that goes from transparent to rgba(0,0,0,0.8) on scroll (called Home Header).

I placed the CSS code in Global CSS which I’ve used on other sites successfully:

.x-bar.x-bar-absolute{
background-color: rgba(0, 0, 0, 0) !important;
transition: background 0.4s ease;
}

.x-bar.x-bar-fixed{
background-color: rgba(0, 0, 0, 0.8) !important;
}

However, I then decided I only wanted this transparency on the home page so created a second header for the rest of the site (called Main Header). I removed the code from the Global CSS to put in the Header CSS so it didn’t affect the second header but then found that the Home Header still changes colour on scroll even though the CSS code is currently completely removed.

I’ve inspected the code for the page in a browser and the CSS formatting is still being applied and I’m banging my head against the wall as to where the code could be stored.

Could this be a bug and it’s not erased the code from some style sheet after I deleted it?

[ruenel]

Hello @sarammog,

Thanks for writing in! Regretfully we cannot check your site because the given credentials in the secure note is not working for us. It seems that the username is incorrect. Please double check it.

The code is still present when I inspected the page. Please go to Cornerstone > Theme Options > CSS and make sure that the code is completely removed. It should be at the bottom of the CSS codes. Removed the code and save your changes. And then go to Cornerstone > Settings > System and hit the “Clear Style Cache” button before testing your site again.

Kindly let us know how it goes.

[sarammog]

HI. Thanks for the quick reply.

I checked the CSS and it’s not in there. I also cleared the style cache and it hasn’t changed.

[prakash_s]

Hello @sarammog,

Thanks for sharing the correct login details I went ahead checked your settings it seems that you have added header style in the page specific CSS.

You can delete the style from here and then clear your browser cache and then check it again.

Thanks

[sarammog]

Wow, that was driving me crazy… I’ve no idea why I pasted it there.

Thanks again for the speedy response.

A bit of a follow on question if that’s okay…

When the menu is in the absolute position, can I change the sub links (under ‘What We Do’) to have a different coloured background base & interactive states than the 80% opacity black/white that is there at the moment. I only want it to affect that top of page position then revert to the 80% black/white when you scroll down the page.

I’m assuming it has a class assigned to it but so far haven’t been able to target it.

[ruenel]

Hello @sarammog,

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector of the submenu items which you need to use so that you can create a custom CSS to change the color when the menu is in absolute position.

Check out this video demonstration:

Dev Tools demo

If you try the DevTool with your site, you will have something like this:

• see the screenshot added in the secure note below

You can then create a custom CSS for example:

.element-absolute .sub-menu .x-anchor {
   /* your styling here */
}

The code above serves as an example code and it will not work out of the box. Feel free to modify it to get you started with the modification that you need. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Hope this helps.

[sarammog]

Thanks for that. At least I was attempting the right thing…

I’ve been trying to target the right class but with so many multiple classes, my css skills just aren’t up to the task at the moment.

[tristup]

Hi @sarammog,

In that case, I would suggest you hire a developer who can assist you on CSS or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks