sub-menu background color and font color

  • Hello,
    I am working on my site in MAMP, so cannot send a link. I would like to change the color of my primary menu links to black, but use a black for the submenu background color and white for the submenu links. I can’t seem to get it to work.

    I put this in the Additional CSS to get the main menu links black:

    /* Primary Menu */

.primary-menu a {
	color: black!important;
}

    It wouldn’t work unless I put the !important modifier. Unfortunately, you cannot see the submenu links now, because they are black on a black background!

    Thank you!
    Chris

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

  • to no longer have a problem with (! important), create a child theme and in principle they will have priority.

    https://childthemegenerator.com/twenty-twenty-wordpress-theme-child-theme-download/

    .primary-menu > li > a {color:black !important;}

    • This reply was modified 3 years, 1 month ago by diagonale.
    Thread Starter chriscaldwell11

    (@chriscaldwell11)

    Thank you, again, Diagonale!

    I simply added the .primary-menu > li > a {color:black !important;}
    to additional CSS and it worked! But I will check out the child theme, too.

    Also, I’m wondering about the background color of the submenu, how to change this to maybe gray, etc?

    I tried to add this, but it made the main menu links have a background of gray also. I only want the submenu to have a background color.

    .primary-menu > li > a {
    color:black !important;
    background: gray !important;
    }

    I really appreciate your help!
    Thank you
    Chris

    https://zupimages.net/viewer.php?id=21/36/oq4d.png

    /*bubble*/
body:not(.overlay-header) .primary-menu ul {
    background-color: #ddd;
}
/* bubble */
.primary-menu ul {
    background: #ddd;
    border-radius: 0.4rem;
    color: #fff;
    font-size: 1.7rem;
    opacity: 0;
    padding: 1rem 0;
    position: absolute;
    right: 9999rem;
    top: calc(100% + 2rem);
    transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
    transform: translateY(0.6rem);
    width: 20rem;
    z-index: 1;
}
/*down arrow*/
body:not(.overlay-header) .primary-menu > li > ul:after {
    border-bottom-color: #ddd;
}
    Thread Starter chriscaldwell11

    (@chriscaldwell11)

    Fantastic! Thank you, diaganole! Is there a way to make the little submenu down arrow gray? It’s still red.

    I put a link to a screenshot here:

    https://chriscaldwell.com/my-images/down.png

    So appreciate your help, as I am making progress now!
    Chris

    .primary-menu > li > .icon {
    color: #fff;
    }

    Thread Starter chriscaldwell11

    (@chriscaldwell11)

    Hi diagonale,
    That worked once I put !important in!
    Thank you very much. You are so good at this stuff!

    Chris

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘sub-menu background color and font color’ is closed to new replies.