Archived topic
change secondary navigation color when merge site header with content
3 replies · Started by Gina on January 30, 2021
Hi,
I am turning to you with the following questions:
I have created several headers in elements.
In one of them I would like to merge the header with the content, but in customization, additional CSS I have set a margin for the page hero which interferes with the design that I am looking for.
How can I get rid of this margin only for this page and header?
My white secondary menu background also interferes with the design because I would need it to be transparent only in the case of this specific page with this specific page header.
How can I change the secondary navigation background to be transparent?
Many thank for your time and effort,
Gina
Hi there,
edit your merged header element, add an Element Class eg. merged-header
Then update your CSS to:
.page-hero:not(.merged-header) {
/* style for all page heros except the merged header */
}Changing the secondary nav colors - if the header element is used on multiple pages then i would do this. Create a new Hook element, use the wp_head hook and set the Display Rules to match the Header Element - and your Secondary Nav CSS inline like so:
<style>
/* Secondary Nav background */
#secondary-navigation {
background-color: transparent;
}
/* Secondary Nav parent item colors and hover colors */
#secondary-navigation .main-nav > ul > li a {
background-color: transparent;
color: #fff;
}
#secondary-navigation .main-nav > ul > li:hover a {
background-color: #fff;
color: #000;
}
</style>Hi David,
It worked perfectly!
Many thanks
Glad to hear that
