Question 165633 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I change the main menu submenu items to white in WordPress 5.7 & Theme 2021?

WordPress 5.7, Theme 2021.

1 How do you change the colour of the submenu items in the Main Menu?
I’m a WordPress newbie, basic/intermediate knowledge of CSS.

2 How do I change the background colour of the main menu and submenu?

This additional CSS makes the main menu items white. I want to do the same to the submenus.

*start of menu */
/*menu background */
.menu-wrapper {
background: rgba(204,153,51,.75);
}

a#primary-menu-list {
color:white;
}

.primary-navigation .primary-menu-container > ul > .menu-item > a
{color:white;}

.svg-icon
{color:white;}

/*end of menu */
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Attempt 1: I failed with the CSS, but then looked carefully in:

    Plugin: Options for Twenty Twenty-One (free version) Customising Nav Options

    set Nav Background Color: selected the relevant color

    Attempt 2: Without the plugin

    This works well when I use the + key to trigger the drop down If I click on the submenu heading the heading is hard to read (white text on whitish background). Works well with + key to open menu

    Clicking on menu heading gives white text on whitish background, hard to read

    Additional CSS

    :root {
/*submenu color */
    --primary-nav--color-link:  white;
/*main menu color */
    --primary-nav--color-link-hover: white;
    
/* where does this take effect?
--primary-nav--color-text: red;
*/
  --primary-nav--color-text: #000000;
      
        
}
/*this is the background of the main menu only, not submenu */
.menu-wrapper {
background: rgba(204,153,51,.75);
}


/*
 this is for the submenu (drop down menus)
*/

.primary-navigation .sub-menu .menu-item>a { color: var(--primary-nav--color-link); 
background:rgba(204,153,51,.75); */


}

.svg-icon
{color:white;}

  2. 0

    As this theme supports CSS variables right now – I’d suggest you not override selectors, but override just variables. You need to add to your CSS these lines, replace with the colors you really want to use and make sure they override default styles

    :root {
    --primary-nav--color-link:  #ffffff;
    --primary-nav--color-link-hover: #cecece;
    --primary-nav--color-text: #000000;
}

    Here’s the list of available variables for the main navigation

    --primary-nav--font-family: var(--global--font-secondary);
--primary-nav--font-family-mobile: var(--global--font-primary);
--primary-nav--font-size: var(--global--font-size-md);
--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
--primary-nav--font-size-button: var(--global--font-size-xs);
--primary-nav--font-style: normal;
--primary-nav--font-style-sub-menu-mobile: normal;
--primary-nav--font-weight: normal;
--primary-nav--font-weight-button: 500;
--primary-nav--color-link: var(--global--color-primary);
--primary-nav--color-link-hover: var(--global--color-primary-hover);
--primary-nav--color-text: var(--global--color-primary);
--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
--primary-nav--border-color: var(--global--color-primary);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search