sub-menu colours: remove black border?

  • Resolved herefordcomputerhelp

    (@herefordcomputerhelp)


    4 years, 9 months ago

    I have changed the colours of the sub-menus from the defaults of black background, white text), by using the following:

    
/* colours of sub-menu */
.primary-menu .sub-menu a {
    background: white; color: grey;
}

    but I have a problem in that there is still a persistent BLACK BORDER at the top and bottom of each sub-menu. Here is an example:

    screenshot: example of black border on sub-menu

    Please can anyone suggest some additional CSS to eliminate that border, or at least change it to white?

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator James Huff

    (@macmanx)

    Try this:

    body:not(.overlay-header) .primary-menu ul {
    background-color: none;
}
body:not(.overlay-header) .primary-menu > li > ul::after {
    border-bottom-color: none;
}
.primary-menu ul::after {
    border-bottom-color: none;
}

    If you’d like to customize the color instead, just swap out none for your preferred color:

    body:not(.overlay-header) .primary-menu ul {
    background-color: #d311b4;
}
body:not(.overlay-header) .primary-menu > li > ul::after {
    border-bottom-color: #d311b4;
}
.primary-menu ul::after {
    border-bottom-color: #d311b4;
}
    Thread Starter herefordcomputerhelp

    (@herefordcomputerhelp)

    @macmanx – Thank you for this code. In fact, none didn’t seem to work, – it threw an error, expecting a color, so I changed it to transparent

    Very grateful for the help in identifying the selectors etc.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘sub-menu colours: remove black border?’ is closed to new replies.

Tags