Menu underline the same width as the menu titles?

Hey DeMamp,

Your site is in construction mode, please include login details in private so that we can view it.

Best regards,
Rikard

Hi,

Thanks for contacting us!

I added following code to bottom of Quick CSS field in Enfold theme options > General Styling

#top .avia-menu-fx {
    bottom: 22%;
    width: 70%;
    left: 15%;
    opacity: 1;
    visibility: visible;
}

and chose “default” in “Header Style” in Enfold theme options > Header tab.

Please review your website :)

Regards,
Yigit

Hi,

Thank you for the info.

We could create a pseudo container (:before) inside the current menu item, specify its dimension so that it has the same width as the menu item minus the 26px padding, apply the same orange background to it and make sure that it is positioned at the very top of the header. Please remove 3px orange border that you previously applied to the current menu item, then use this css code instead.

.current-menu-item::before {
	content: "";
	position: absolute;
	top: 0;
	width: calc(100% - 26px);
	height: 3px;
	background: #fbb040;
	left: 13px;
}

Best regards,
Ismael