[Resolved] Undeline Menu – Submenu

Home Forums Support [Resolved] Undeline Menu – Submenu

Home Forums Support Undeline Menu – Submenu

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1566947
    Alberto

    Hi everybody.

    You were previously so kind to give me the code to make Menu items underline on page and hover.
    Here -> https://www.bfbinsurancebroker.com/convenzione-atmos/

    I’ve added a Submenu item on Associazioni.
    Could you help me to make the submenu formatted like the menu item?

    Hope I explain me well…

    thanks in advance

    Alberto

    #1566952
    Alberto

    Oh, that’s the code:

    /* Underline Menu*/
    .main-navigation .main-nav ul li[class*=”current-menu-“]>a:after,
    .main-navigation .main-nav ul li:hover>a:after,
    .main-navigation .main-nav ul li.sfHover:hover>a:after {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 2px solid #e62a32;
    position: relative;
    top: -15px;
    opacity: 1;
    }

    .main-navigation .main-nav ul li[class*=”current-menu-“]>a:after {
    border-bottom: 2px solid #184590;
    }

    /* Force menu item to width of text */
    .fl-builder-content nav ul li a {
    display: inline-block;
    }
    /* Create hidden underline on all menu items but hide it */
    .fl-builder-content nav ul li a:after {
    content: “”;
    display: block;
    width: 100%;
    border-bottom: 2px solid #e62a32;
    top: 10px;
    position: relative;
    opacity: 0;
    }
    /* Change colors and show underline on hover and current */
    .fl-builder-content nav ul li:hover>a:after {
    border-bottom: 2px solid #e62a32;
    top: 10px;
    opacity: 1;
    }
    .fl-builder-content nav ul li[class*=”current-menu-“]>a:after {
    border-bottom: 2px solid #e62a32;
    top: 10px;
    opacity: 1;
    }

    Sorry, I did not mentioned in the previous post.

    #1567599
    David
    Staff
    Customer Support

    Hi there,

    add this CSS to move the Submenu underline to below the text:

    .main-navigation .main-nav ul ul li:hover>a:after {
        top: 0;
    }
    #1570031
    Alberto

    Thank you David!

    #1570177
    David
    Staff
    Customer Support
    #1572793
    Alberto

    Dear @David, I’m sorry to get back on that.

    When we move with the mouse over the sub-menu, the underline moves on the text and it seems a “strike” text.

    https://www.bfbinsurancebroker.com/agite/

    The main menu voice is Associazioni.

    Could you help us again?

    Thanks in advance.

    #1573098
    David
    Staff
    Customer Support

    Hmmm.. theres a few CSS conflicts going on there.

    Could you remove the CSS you have added for the navigation underline effect and we’ll look at a better way of doing that.

    #1573107
    Alberto

    Thank you @David.

    Moved away the css code added.

    Colors on menu selection: #184590
    Colors on menu active: #e62a32
    (if helps)

    Thanks in advance indeed.

    #1573141
    David
    Staff
    Customer Support

    Can you remove this as well – its in the Customizer Additional CSS:

    .main-navigation li a:after {
        opacity: 0;
        transition: opacity 500ms ease-in-out;
        content: "";
    }
    #1573144
    Alberto

    Done @David.

    Sorry, I was convinced to have removed all.

    #1573154
    David
    Staff
    Customer Support

    No problems ๐Ÿ™‚ Try this CSS:

    @media (min-width: 769px) {
        .main-navigation .menu .menu-item>a::after {
            content: "";
            position: absolute;
            right: 20px;
            left: 20px;
            bottom: 0;
            display: block;
            height: 2px;
            background-color: transparent;
            transition: 0.3s background-color ease;
        }
    
        .main-navigation .menu .menu-item.current-menu-item>a::after,
        .main-navigation .menu .menu-item.current-menu-ancestor>a::after,
        .main-navigation .menu .menu-item>a:hover::after {
            background-color: currentColor;
        }
    
        .main-navigation ul ul {
            padding-bottom: 20px;
        }
    }
    #1574303
    Alberto

    Wow… I’ll study your css to understand how you did that.
    Works perfectly.

    Thank you again.

    #1574491
    David
    Staff
    Customer Support

    Glad to be of help ๐Ÿ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.