Archived topic

Underline Colors in Menù

5 replies · Started by Alberto on July 30, 2019

Viewing posts 1–6 of 6

July 30, 2019 at 1:39 am #970799

Hi, we're new in GeneratePress and not so expert on code.

We have found on forum that code for underline our 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;
}

It works for us, but we need a more implement: we wish the underline on active page be #184590 (instead of #e62a32).
So on hover text and underline goes #e62a32, but on active page test and underline rest #184590.
Inactive page should remain #184590, for completness.

I think it is a so common request that I feel real noob.

Could you help us?

Thanks for patience.

Alberto

July 30, 2019 at 5:49 am #970947

Hi there,

we can add an additional CSS rule to change the color on current menu - so your entire code will look like so:

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

July 30, 2019 at 5:59 am #970951

Thank you David!

It fits perfect (no doubt about that...^^).

Just another question: if we want to apply to the widget menu on the side?

If we click on "Convenzione Ginecologi" (or Cliniche Private, it's the same) the text is #e62a32 (while inactive stand #184590).
How to underline that #e62a32 on hover and active page?

July 30, 2019 at 6:31 am #970969

So its a beaver builder module - not sure if that function is available through the beaver builder editor if it isn't then try this CSS - i have commented it to explain how this works:

/* 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;
    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;
    opacity: 1;
}
.fl-builder-content nav ul li[class*="current-menu-"]>a:after {
    border-bottom: 2px solid #184590;
    opacity: 1;
}

July 30, 2019 at 7:00 am #970990

David, you're a drake.

Applied it and it's great.
I've just added the

top: 10px;

to the CSS in order to make a little distance to the underline.

Try it, if you can.
For us is suitable.

Thanks a lot!!!

July 30, 2019 at 8:41 am #971215

Awesome glad to be of help :)

This archived topic is closed to new replies.

Start building better websites today.