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.

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

Sorry this option is not available.

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.

I would use

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

Thanks .. none of it worked.

weird, worked on my demo.