- This topic has 7 replies, 4 voices, and was last updated 4 years, 2 months ago by Tom.
-
AuthorPosts
-
October 28, 2018 at 7:31 am #712352Cristina
.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus { color: #000; background-color: #fff; } .main-navigation li a:after, .secondary-navigation li a:after { opacity: 0; transition: opacity 500ms ease-in-out; content: ""; } .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, .secondary-navigation .main-nav ul li[class*="current-menu-"] > a:after, .secondary-navigation .main-nav ul li:hover > a:after, .secondary-navigation .main-nav ul li.sfHover:hover > a:after { content: ""; display: block; width: 100%; border-bottom: 2px solid #A13643; position: relative; top: -20px; opacity: 1; }
I’ve add this css a long time ago. It is a way of adding the red underline on the hover menu.
Now i see that when i hover (see project page) the menu has a little jump on the image bellow.
I’m thinking this happens because on hover, the menu needs a bit more space to render that line. (? maybe)The problem is i’ve added more space to the height and it does not fix my problem.
I have 72px on menu item height in primary nav and on sticky, also the header padding is zero.
Any ideas how i can control that underline on hover, to not mess with the primary menu height?
tyOctober 28, 2018 at 7:45 am #712353DavidStaffCustomer SupportHi there,
try this CSS, it basically moves the border to the non hover state, so the height doesn’t change:
.main-navigation li a:after, .secondary-navigation li a:after { opacity: 0; transition: opacity 500ms ease-in-out; content: ""; display: block; width: 100%; border-bottom: 2px solid #A13643; position: relative; top: -20px; } .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, .secondary-navigation .main-nav ul li[class*="current-menu-"] > a:after, .secondary-navigation .main-nav ul li:hover > a:after, .secondary-navigation .main-nav ul li.sfHover:hover > a:after { opacity: 1; }
October 28, 2018 at 8:21 am #712472CristinaThat easy!.. solved.
Also, many thanks for the quick response.
October 28, 2018 at 9:03 am #712485DavidStaffCustomer SupportGlad to be of help
January 14, 2020 at 12:04 pm #1132193DamonOoh, thank you for this, I am going to adapt it to my site.
Please could someone let me know how I can stop the border being shown on drop down menu items?January 14, 2020 at 4:26 pm #1132344TomLead DeveloperLead DeveloperHi there,
Try adding this CSS:
.main-navigation .sub-menu li a:after { display: none; }
January 15, 2020 at 3:25 am #1132679DamonCheers Tom, you’re a star.
January 15, 2020 at 9:45 am #1133181TomLead DeveloperLead DeveloperGlad I could help 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.