Menu bar coloring per page – Weaver Xtreme

[GoScoutUK]

Joy gave me a great css list for colouring menu bars on specific pages for Weaver II.

Can anyone update the list for Weaver Xtreme? The same css does not seem to work on the new theme.

Thanks

You can see them on http://www.cambodianinnocence.com, where each menu header is supposed to have its own menu bar color-set.

/*Menu bar background color*/
.page-id-24  #access {background-color:#ff3232 ! important;}

/*General text and background color*/
.page-id-24 .menu_bar li a, .page-id-24 .menu_bar a:visited {color:white !important;background-color:#ff3232 !important;}

/*Hover text and background*/
.page-id-24 .menu_bar a:hover, .page-id-24 .menu_bar a:focus {color:black !important;background-color:#ffafae !important;}

/*Current menu text and background*/
.page-id-24 .menu_bar ul li.current_page_item > a, .page-id-24 .menu_bar ul li.current-menu-item > a {color:black !important;background-color:#ff3232 !important;}

/*Submenu text and background color*/
.page-id-24 .menu_bar ul ul a {color:white !important;background-color:#ff3232 !important;}

/*Sub menu hover*/
.page-id-24 .menu_bar ul ul a:hover {color:black !important;background-color:#ffafae !important;}

/*Sub menu Current*/
.page-id-24 .menu_bar ul li.current_page_item > a, .menu_bar ul li.current-menu-item > a {color:black !important;background-color:#ff3232 !important;}

[scrambler]

The rules below should do it.

If you need to target primary only or secondary only or extra only, you would have to change

.wvrx-menu-container

to the one below, using primary, secondary or extra

.menu-primary .wvrx-menu-container

/*Menu bar background color*/
.page-id-24  .wvrx-menu-container {background-color:#ff3232 ! important;}

/*General text and background color*/
.page-id-24 .wvrx-menu > li > a {color:white !important;background-color:#ff3232 !important;}

/*Hover text and background*/
.page-id-24 .wvrx-menu > li > a:hover {color:black !important;background-color:#ffafae !important;}

/*Current menu text and background*/
.page-id-24 .weaverx-theme-menu .current_page_item > a, .page-id-24 .weaverx-theme-menu .current-menu-item > a, .page-id-24 .weaverx-theme-menu .current-cat > a, .page-id-24 .weaverx-theme-menu .current_page_ancestor > a, .page-id-24 .weaverx-theme-menu .current-category-ancestor > a, .page-id-24 .weaverx-theme-menu .current-menu-ancestor > a, .page-id-24 .weaverx-theme-menu .current-menu-parent > a, .page-id-24 .weaverx-theme-menu .current-category-parent > a {color:black !important;background-color:#ff3232 !important;}

/*Submenu text and background color*/
.page-id-24 .wvrx-menu ul li a, .page-id-24 .wvrx-menu ul.mega-menu li {color:white !important;background-color:#ff3232 !important;}

/*Sub menu hover*/
.page-id-24 .wvrx-menu ul li a:hover {color:black !important;background-color:#ffafae !important;}

[GoScoutUK]

Thank you so much. This all works perfectly

[Author]

Posts