[Glen Pavelich]

Is there a way to have a menu background color on the pages that are not home.  That is, for all other pages but the home page.

The background color for home is black and needs to stay that way.

The menu background css I have for the other pages is currently transparent, but transparent is no longer appropriate as it drops over some of the text on some screen sizes and therefore cannot be read properly, so it needs a color.  However, if I put a color to replace transparent, it needs an !important in order to work, and then that over rides the black background on the Home page.

(css line 86)

.navigation-horizontal .main-navigation ul ul {
background-color: transparent;
border-style: solid;
border-width: 0px 1px 0px 0px;
border-color: #fff !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

[My Css is duplicated currently.  I just uploaded it to the child theme, but have not yet taken it off the additional css.  I have to do this progressively as I have found in the past that some things don’t continue to work once removed from the additional css]

[minal]

Hello @Glen,

To achieve this style, Please add this CSS snippet to your additional CSS section

Please goto Dashboard>> Appearance >> Customizer >> Additional CSS

@media only screen and (min-width: 64em) {
   body:not(.home) .site-header-main .site-header-menu .menu-inside-wrapper .main-navigation .sub-menu {
     background: #fff;
   }

}

Add your desired color code to the above CSS

Hope it works for you !!

Sincerely,

Minal

[Glen Pavelich]

Thank you.  Works perfect.

[minal]

Hello @Glen,

We’re glad that it works for you. If you have any queries please feel free to share !!

Sincerely,

Minal

[Author]

Posts