Archived topic

Top Menu Underline

1 reply · Started by John on February 16, 2023

Viewing posts 1–2 of 2

February 16, 2023 at 2:15 pm #2536073

I have put underline css code to TOP Menu, but I can't change the sub menu underline padding without The main menu item, Also How to make the underline appearing in the current page?

.main-navigation li > a::after {
  bottom: 10px;
  content: "";
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  background: #f46100;
  transition: width 0.3s ease 0s, left 0.1s ease 0s;
  width: 0;
}
.main-navigation li > a:hover::after, .main-navigation li > a.active-nav::after {
    width: calc(100% - 40px);
    left: 50%;
    transform: translatex(-50%);
    bottom: 10px;
}

February 16, 2023 at 5:20 pm #2536179

Hi John,

For qeustion 2, try adding this CSS specifically for the sub-menu items:

.main-navigation .sub-menu li > a:hover::after {
    bottom: 0;
}

For question 2, add this CSS selector to the hover effect CSS:
.main-navigation .main-nav ul li[class*="current-menu-"] > a:after

This archived topic is closed to new replies.

Start building better websites today.