To make the Hotel demo more special we have added some CSS codes in the Appearance > Theme File Editor > Stylesheet (style.css) area. In this case, to change the hover and active color you just need to find those two CSS codes (see video):
/* Header: Menu Hover Color */
.main-header.menu-type-standard-menu .standard-menu-container ul.menu>li>a:hover {
color: #c39a2c !important;
}
/* Header: Menu Active Item Color */
.main-header.menu-type-standard-menu .standard-menu-container ul.menu>li.current-menu-item>a,
.main-header.menu-type-standard-menu .standard-menu-container ul.menu>li>a:hover {
color: #c39a2c !important;
}
and change the #c39a2c to your own favorite color such as #00c661 for example.
You can also find all the #c39a2c codes and replace them with the color that you want. The other colors you can find in the Theme Styling area (read more).
All the CSS codes added in that area are commented, so you can see what they do. In the previous ticket, I wrote that you can find all the yellow colors by searching their CSS code (#c39a2c)
In this case too, you will see this CSS code:
/* Header: Sub Menu Border */
.main-header.menu-type-standard-menu .standard-menu-container div.menu > ul ul,
.main-header.menu-type-standard-menu .standard-menu-container ul.menu ul {
background-color: #c39a2c !important;
box-shadow: 0px 0px 0px 5px #c39a2c,
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5) !important;
}
and you can change their color, see example:
/* Header: Sub Menu Border */
.main-header.menu-type-standard-menu .standard-menu-container div.menu > ul ul,
.main-header.menu-type-standard-menu .standard-menu-container ul.menu ul {
background-color: #A6A8A8!important;
box-shadow: 0px 0px 0px 5px #A6A8A8,
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5) !important;
}
Hi there
Can you tell me know to modify the yellow active link color to a different one and also the dropdown menu background color? (ex at the Book now tab)
Thank you.
Hi byro13,
To make the Hotel demo more special we have added some CSS codes in the Appearance > Theme File Editor > Stylesheet (style.css) area. In this case, to change the hover and active color you just need to find those two CSS codes (see video):
/* Header: Menu Hover Color */ .main-header.menu-type-standard-menu .standard-menu-container ul.menu>li>a:hover { color: #c39a2c !important; } /* Header: Menu Active Item Color */ .main-header.menu-type-standard-menu .standard-menu-container ul.menu>li.current-menu-item>a, .main-header.menu-type-standard-menu .standard-menu-container ul.menu>li>a:hover { color: #c39a2c !important; }and change the #c39a2c to your own favorite color such as #00c661 for example.
You can also find all the #c39a2c codes and replace them with the color that you want. The other colors you can find in the Theme Styling area (read more).
Have a nice weekend!
Thank you.
I managed to change the active link color but the dropdown menu background color is still yellow: https://v2.nuthurstgrange.com/food-2/
What am I missing?
Thank you.
All the CSS codes added in that area are commented, so you can see what they do. In the previous ticket, I wrote that you can find all the yellow colors by searching their CSS code (#c39a2c)
In this case too, you will see this CSS code:
/* Header: Sub Menu Border */ .main-header.menu-type-standard-menu .standard-menu-container div.menu > ul ul, .main-header.menu-type-standard-menu .standard-menu-container ul.menu ul { background-color: #c39a2c !important; box-shadow: 0px 0px 0px 5px #c39a2c, inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5) !important; }and you can change their color, see example:
/* Header: Sub Menu Border */ .main-header.menu-type-standard-menu .standard-menu-container div.menu > ul ul, .main-header.menu-type-standard-menu .standard-menu-container ul.menu ul { background-color: #A6A8A8!important; box-shadow: 0px 0px 0px 5px #A6A8A8, inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5) !important; }Have a nice day!