- This topic has 5 replies, 2 voices, and was last updated 4 years, 8 months ago by David.
-
AuthorPosts
-
July 30, 2019 at 1:39 am #970799Alberto
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 #970947DavidStaffCustomer SupportHi 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 #970951AlbertoThank 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 #970969DavidStaffCustomer SupportSo 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 #970990AlbertoDavid, you’re a drake.
Applied it and it’s great.
I’ve just added thetop: 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 #971215DavidStaffCustomer SupportAwesome glad to be of help 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.