.main-header-bar {background-color: black;}
or for min-width: 769px
@media (min-width: 769px) {
.main-header-bar {background-color: black;}
}
submenu
.ast-desktop .astra-menu-animation-fade>.menu-item>.sub-menu {background-color: black;}
So, where exactly am I copy pasting this? Is it in style.css?
For example, here: Appearance → Customize → Additional CSS. Or in a child theme.
OK, so this worked. Thank you.
However, when I view the site on Tablet or Mobile mode, it still has the white submenus. Any ideas?
for ul:
.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu {
background-color: black;
}
for ul ul:
.ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children .sub-menu {
background-color: black;
}
This is obviously a beginner question, but what do you mean by “for ul” and “for ul ul”? Thanks.
I copied and pasted your code into Additional CSS and it has worked. Thanks again.
Hi,
I need the code in order to change the text color and the hover color on the nav menu. I tried with different pieces of css code but I couldn’t resolve it.
Thanks!
Hello @damito10
If you want to change the menu color and hover color from your website then you can do it easily using the Astra Pro. However, for the free version, you can use the below code and change the color value from it based on your required color.
Refer to this custom CSS:
.main-navigation ul li a:hover {
color: green;
}
.main-navigation ul li a {
color: red;
}
I hope that helps.
Regards
Riad
