Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
gambreu

Customer CSS for Header Color

Question

Site URL: https://brecha.online

Hi! I'm trying to figure out a way to change the color of my header on one specific page of my website (it's black throughout the website and I want to make it yellow on one page). 

I followed this helpful article and was able to find a code snippet that makes the header yellow while I'm on the custom CSS page, but whenever I leave, the live website goes back to the black header. 

Can someone help me figure out where the error is? As mentioned, I would like to ideally add this to a specific page, so if anyone could also recommend how to do this (via unique page id for instance) that would be very much appreciated!
 

.header#header {position: fixed!important;}

.header-nav-folder-content {
   background: #fac124!important;
}

body:not(.tweak-transparent-header) .black .header-announcement-bar-wrapper {
    background-color: #fac124;
}

 

Screen Shot 2020-05-22 at 7.25.49 PM.png

Screen Shot 2020-05-22 at 7.25.26 PM.png

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0
Posted (edited)

@tuanphan Thank you so much, that worked beautifully!! 

Do you also know how to set a custom color for the button in the header on that particular page?

Edited by gambreu

Share this post


Link to post
  • 0

@tuanphan Persona, but I actually managed to do it by adding this code block on that particular page:

<!--Navigation bar-->
<style>
.header-announcement-bar-wrapper {
    background: #fac124!important;
    color: #fac124!important;
  }
</style>

<!--Navigation dropdown-->
<style>
.header-nav-folder-content {
   background: #fac124!important;
   color: RGB(0,0,0)!important;
</style>

<!--Button color-->
<style>
.btn.btn--border.theme-btn--primary-inverse {
   background: RGB(0,0,0)!important;
   color: #fff;
} 
</style>

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...