I am trying to alter certain styles of a header using ON-PAGE css. The menu itself is the same throughout the site so rather than have a differently styled menus for each of the site’s sections (Each section is to have a certain colour scheme) I thought on-page css could easily overwrite this. It WORKS within the page builder but not on the page in the browser.
See this 2 min loom video: https://www.useloom.com/share/890eecc2e9d648a1b1efc63a6dfe595e
On a particular page I have added this css to make things pink but still the header remains in the default colours:
/* Changes colour of the menu bar background to pink and the logo in the slider's background*/
.x-bar, .logo {
background-color: #B84664 !important;
border-color:#6E2A3C !important;
}
/* Changes font colour of the sub menu text in the slider itself to pink*/
.sub-head {
color:#B84664 !important;
}
/* Changes the dropdown menu border colours to pink*/
.x-dropdown {
border-color:#6E2A3C !important;
border-top: 2px solid #B84664!important;
}
Can you understand what I am trying to achive here?
How can this be done.