Using custom.css

Question

Hello, I am trying to add code to custom.css but it is not working for me. When i add to style.css it's fine. Do i have the css link path correct? Thank you

SemiColonWeb · Accepted Answer

Hello,

We recommend adding all your Custom CSS Codes in the css/custom.css File as this way when we release updates you can track your Custom CSS Changes.

Simply use this CSS to change the Header Color on Sticky:
[ch_pre type="css"].sticky-header #header-wrap {
background-color: #fff;
}[/ch_pre]

To change the Logo on Sticky, you can use data-sticky-logo Attribute. Ex:
[ch_pre]

](index.html)

[/ch_pre]

An example can be found here: https://themes.semicolonweb.com/html/canvas/logo-changer.html .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

roburdick · Answer

It seems to work now, maybe it was a cache issue!

I would like the header wrapper to have a background colour when the user scrolls down like on the real estate template: https://themes.semicolonweb.com/html/canvas/demo-real-estate-2.html

I can't work out where to add CSS to make this happen. Alternatively I would like the logo to change colour when scroll down, can this be done?

Thanks

roburdick · Answer

That is useful thank you for your response. I think I was having server side caching problems which had me confused. I found help here https://stackoverflow.com/questions/11474345/force browser to refresh css javascript etc I added something like ?v=1.x to css file link, when the file content is ch…

roburdick · Answer

One further question please sir!

I would like the sticky header logo to be smaller than the main header logo. How can I add CSS code to increase the non-sticky header logo size without affecting the sticky logo size please?
https://birdclick.co.uk/logo-change/

Rob

Semicolon Web · Answer

Hello,

Please consider checking out this Documentation in order to change Header Heights: https://docs.semicolonweb.com/docs/header/header-heights/ . You can simply use the Custom CSS available in this Documentation and add the Codes in the css/custom.css File.

That's it. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.