Page CSS to overide Header CSS

[elanmedia]

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.

[paul.r]

Hi,

Please use PRO Headers Native Functions instead of adding Custom CSS

For example, you can change your dropdown background color here

Do the same for others.

Thanks

[elanmedia]

But that would mean a a different header for around 15 different sections (depts) the header are exactly the same except the colour - it makes not sense to have 15 Headers. I have set the header to the the main brand colours using the method suggested already.

Why is this on-page css working ok with one page and not on another?

Thanks

[Joao]

Hi There,

At the end, would be a lighter solution to have different headers.

But please provide the page you are referring to and we will provide you the correct CSS if you choose this path.

After that you will need to setup the page ID in front of each selector in order to make it page exclusive.

Hope it makes sense.

Thanks

[elanmedia]

I don’t think you have watched the 2 min video…it probably worthwhile to understand what I have done and why I can’t understand whats going on.

The two pages ‘currently’ in the picture are:

http://www.wgccentenary.org/garden-at-rhs-chelsea-flower-show (css NOT working)
http://www.wgccentenary.org/john-test (css IS Working…with same on-page css as above!)

[mldarshana]

Hi There,

Thanks for the explanation and I have watched your video. Instead of your general CSS rules, can you follow the below method which will have a higher priority and it will target your exact elements.

.page-id-188 .hm4.x-bar {
    background-color: red;
}
.page-id-188 .logo {
    background-color: red !important;
}

Page or Post IDs can be located using this guide (https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59).

Let us know how it goes.
Thanks!

[elanmedia]

Hi

thanks for that. Just three questions:

1. Where am I putting this css code?
2. Why is what I have done working on one page and not the other?
3. Can you see why this morning I am seeing no page builder content in John Test ( http://www.wgccentenary.org/john-test) yet it was fine last night and the content sections, rows etc ARE showing on the left. This is not a browser issue as I am now at the office with a separate set up.

Ta

[mldarshana]

Hi There,

1.You can add CSS into your Theme Options -> Global CSS area.

2.Basically when you have other specific CSS rules in a page and when you’re adding a generalize CSS rule, the priority will be given to the specific rule.

For example <div class="hm4 x-bar">My Content</div>

CSS:

/* Your CSS */
.x-bar {
background-color: blue;
}

/* Specific or Targeted CSS */
.page-id-188 .hm4.x-bar {
    background-color: red;
}

3.It’s hard to guess without looking at your server configurations and settings. However try increasing your PHP max execution time to 300 and see if that helps. For most servers, default configuration would be 30 (30 seconds) which means after 30 seconds, PHP script won’t execute and it will ignore.

Thanks!