Edit Secondary Menu CSS

  • Resolved sledzuk

    (@sledzuk)


    2 years, 8 months ago

    Hi, I’m trying to edit the secondary menu appearance but cannot find the correct CSS to change anything with it. I’ve been digging through and nothing I try seems to change.

    Overview of what I want:

    Add a border to the drop down, round off corners and change the hover colour.

    Any help with the above would be appreciated.

    • This topic was modified 2 years, 8 months ago by sledzuk.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • 1dr0.a11n

    (@1dr0a11n)

    2 years, 8 months ago

    Hello @sledzuk!

    Got it! I understand you are looking for the right selectors to edit the secondary menu with CSS. Are you creating something like this?

    SCR-20231011-ndih.png

    To modify the appearance of the secondary menu, you can use the following CSS code (Appearance → Additional CSS):

    /* Add rounded corners to menu */
ul.sub-menu, ul.sub-menu li.menu-item:last-child {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
/* Add border to the sub-menu items */
ul.sub-menu li.menu-item {
    border-bottom: 1px solid var(--wp--preset--color--black);
}
/* Adjust background color to menu items on hover */
ul.sub-menu li.menu-item:hover {
    background-color: var(--wp--preset--color--cyan-bluish-gray);
}

    You can replace var(--wp--preset--color--black) and var(--wp--preset--color--cyan-bluish-gray) with your preferred colors. Use a hex color picker like this one here: HTML Color Picker, by W3Schools

    If these changes don’t take effect, append !important to enforce them. For example:

    background-color: var(--wp--preset--color --cyan-bluish-gray) !important;

    This will ensure your custom styles take the highest priority over existing ones. Give this a try, and let me know how it goes!

    Thread Starter sledzuk

    (@sledzuk)

    2 years, 8 months ago

    @1dr0a11n Many thanks, exactly what I was looking for, site is updated and the drop downs are looking a hell of a lot better. <3

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

The topic ‘Edit Secondary Menu CSS’ is closed to new replies.

Tags