Awaiting an answer Templates

underline for active menu item

Asked by damian 3 years ago Last activity 2 years ago

how do i get the active menu item to have an underline?

7 replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
3 years ago

Hi

Thanks for contacting us. Use this custom CSS

.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    text-decoration: underline;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

-Regards.

damian Asked this
3 years ago

Thanks. And how about to move the line by say 5px lower?

Mehtaz Afsana Borsha Staff
3 years ago

Sorry this option is not available.

damian Asked this
3 years ago

I nearly got it to work with this

/* Target the active menu item */
.sp-megamenu-parent>li.active {
  position: relative;
}

/* Target the line under the active menu item */
.sp-megamenu-parent>li.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px; /* Adjust the height of the line */
  background-color: #fff; /* Set the color of the line */
  transform: translateY(5px); /* Adjust this value to move the line up or down */
}

and this

/* Target the active menu item */
.menu-item.active {
  position: relative;
}

/* Target the line under the active menu item */
.menu-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px; /* Adjust this value to move the line up or down */
  height: 2px; /* Adjust the height of the line */
  background-color: #000; /* Set the color of the line */
}

that chatGPT gave me .. but it wasn't great. thanks anyway.

Paul Frankowski Senior Staff
3 years ago

I would use

.sp-megamenu-parent > li.active > a, 
.sp-megamenu-parent > li.active:hover > a 
{border-bottom: 2px solid red; padding-bottom:5px;}
Hannah Silver
2 years ago

That "lower line" code worked fine for me; Ubuntu 22.04, Firefox 120.0.1.
Perhaps a difference between browsers.

damian Asked this
3 years ago

Thanks .. none of it worked.

Paul Frankowski Senior Staff
3 years ago

weird, worked on my demo.

Log in to reply.