How to make an underline below the menu options in the Helix template in Joomla 4?

[liekecomp2022]

Hello,

I want to change the display of the menu items in the Helix template in Joomla 4.
It should be with the purple underline below the menu options like the menu at: https://reachingautismebegeleiding.nl/

Now it is like: http://ontwikkel10.comp-it-aut.nl/

Can someone tell me how to do this?
Is it an option in the template or css code?

Thanks,

Kind regard, Lianne

[liekecomp2022]

How can I place the underline closer to the name of the menu items: https://ontwikkel10.comp-it-aut.nl/

Just like the underline at https://reachingautismebegeleiding.nl/?

I have finally found the correct css code to make the underline possible.
I placed the css in the custom code of the shaper helix ultimate template:

li > a::after {
content: "";
display: block;
margin: auto;
height: 3px;
width: 0;
top: 5px;
background: transparent;
transition: all 0.3s;

}
li > a:hover::after, li > a.active-nav::after {
width: 100%;
background: #ac84fe ;
}

[davidspring]

Here is the CSS using the Firefox inspector that should be placed in the Helix template custom.css file. To place the underline closer to the name of the menu item, change the line-height from 100px to 40px.

.sp-megamenu-parent > li:hover > a {
color: #ac83ff;
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
display: inline-block;
padding: 0 15px;
line-height: 100px;
font-size: 14px;
margin: 0;
}

[Pavel-ww]

li > a::after {
content: "";
display: block;
margin: auto;
height: 3px;
width: 0;
top: 5px;
background: transparent;
transition: all 0.3s;

}
li > a:hover::after, li > a.active-nav::after {
width: 100%;
background: #ac84fe ;
}

Hi. This code is not entirely correct, as it affects all links in the lists on your site. I think you don't want it. Also, using ::after breaks the dropdown menu arrow on hover over and leads to some other negative effects.

Here is the correct code especially for Helix

Code: Select all

.sp-megamenu-parent>li>a::before,
.sp-megamenu-parent>li>span::before {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    background-color: #ac84fe;
    height: 5px;
    width: 0;
    transition: width .3s;
}
.sp-megamenu-parent>li:hover>a::before,
.sp-megamenu-parent>li:hover>span::before,
.sp-megamenu-parent>li.active>a::before {
    width: 100%;
}

Change bottom property value to place the underline as you want

1.jpg

[peterspieg]

Hello, thanks for the css. It is working, but...
Also the active menu gets this underline. Is it possible to disable this?
I have already tried with some css, but I doesn't work. And fter spending two hours I don't see it anymore.
URL: https://www.domeintest.eu/speeltuin/

[Pavel-ww]

Also the active menu gets this underline. Is it possible to disable this?
I have already tried with some css, but I doesn't work. And fter spending two hours I don't see it anymore.

Hi. To prevent active underline but keep active underline on hover over delete this line.

1.jpg

Or in addition to this, use CSS to prevent the underline of the active item in any conditions

Code: Select all

.sp-megamenu-parent > li.active > a::before {
	display: none;
}