Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1282547


    I was wondering how could I get the menu underline to be the same as this:

    By default the underline’s width is determined by the width of the menu “section”, but I’d like it to be the same width as the text itself just like in the demo.

    Thank you!


    Hey DeMamp,

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

    Best regards,

    This reply has been marked as private.


    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 :)


    This reply has been marked as private.


    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,


    That works perfectly! Thank you so much Ismael.


    Hi DeMamp,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.