[Resolved] Trying to add border radius to bottom corners of last item in Sub menu.

Home Forums Support Trying to add border radius to bottom corners of last item in Sub menu.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1110169
    Alicia

    Hi!

    I’m trying to do this but my CSS isn’t working and I can’t find the background colors in the Chrome Inspector.

    Here’s my CSS:

    .main-navigation ul ul,
    .main-navigation .main-nav ul ul li:last-child:hover {
        border-radius: 0 0 5px 5px;
    }
    #1110191
    Leo
    Staff
    Customer Support

    Hi there,

    Not exactly sure what you are looking for but does this work?

    .main-navigation .main-nav ul ul li:last-child a:hover {
        background-color: #000;
    }

    Let me know 🙂

    #1110289
    Alicia

    Hi!

    I’m trying to retain the rounded corners on hover. Here are two images:

    First, notice rounded corners at bottom of dropdown:

    Rounded corners

    And here when I hover on last item in nav, the background isn’t rounded.

    Not rounded

    #1110365
    David
    Staff
    Customer Support

    Hi there

    try this CSS instead:

    .main-navigation ul ul {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        overflow: hidden;
    }
    #1111635
    Alicia

    That worked!

    I modified it for my exact needs and this is the ticket:

    .main-navigation ul ul,
    .main-navigation .main-nav ul ul li:last-child:hover,
    .main-navigation .main-nav ul ul li.current_page_item:last-child, .main-navigation .main-nav ul ul li.current-menu-item:last-child {
        border-radius: 0 0 5px 5px;
        overflow: hidden;
    }

    The above code takes care of border radius in all scenarios!

    Thanks!

    #1111703
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.