Changing Background Color

  • Hi everyone,

    WP Newbie here so bear with me. I need help changing the background color of the header and the menu dropdown to black. I’ve tried several things (like adding CSS code for background color to style.css), but it doesn’t seemed to have worked.

    Any help is appreciated.

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

  • .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;}

    Thread Starter azecommerce

    (@azecommerce)

    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.

    Thread Starter azecommerce

    (@azecommerce)

    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;
}
    Thread Starter azecommerce

    (@azecommerce)

    This is obviously a beginner question, but what do you mean by “for ul” and “for ul ul”? Thanks.

    Thread Starter azecommerce

    (@azecommerce)

    I copied and pasted your code into Additional CSS and it has worked. Thanks again.

    multilevel list

    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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Changing Background Color’ is closed to new replies.