[Resolved] Undeline Menu – Submenu

[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

[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.

[David]

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;
}

[Alberto]

Thank you David!

[David]

You’re welcome

[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.

[David]

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.

[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.

[David]

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: "";
}

[Alberto]

Done @David.

Sorry, I was convinced to have removed all.

[David]

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;
    }
}

[Alberto]

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

Thank you again.

[David]

Glad to be of help 🙂

[Author]

Posts