Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #1081973

    I know this is possible as I see it on another Enfold site, but using inspector I cannot figure out how to select the option. Looking in documentation, all I found was this:

    /* Top Bar Link style on hover */
    #top #header_meta a {
    color: gold;
    text-decoration: none;

    But that does not seem to do anything, and there is no reference to what options there are for ‘text-decoration’ other than the ‘none’ that is in the code.
    All I am looking for is a line under the menu item that is being hovered over (not for the deeper sub menu items, just those top ones that you see).

    I may have missed it, but I looked all over the Menu documentation and in the Enfold settings sections to no avail.



    Hey gatehealing,

    Can you please disable the caching plugin and share credentials with us. There might be an error in Quick css and we would like to check.

    Best regards,


    Sure. Cache plugin is off and login creds in private box




    Thank you for using Enfold.

    This css code should display the menu-fx container or menu underline on hover.

    .avia-menu li:hover a .avia-menu-fx {
        position: absolute;
        bottom: -1px;
        height: 2px;
        z-index: 10;
        width: 100%;
        left: 0;
        opacity: 1;
        visibility: visible;

    Best regards,


    I cleared my browser history/cache etc. and pasted the code exactly as it is in your code, but it didn’t do anything. I’m using Chrome browser.

    Could any of the other quick css be getting in the way? Y’all have my login creds in the private data from my last response if that would help.



    Nevermind. I got it fixed.



    So now the question is this: If you visit my site, , you’ll see that the line is below the top separator line for the breadcrumb/page-title area. I played with the code and could not get it to move up. I had gotten code when I first purchased the template to get rid of the line because we had moved the main menu down a little, and altered the breadcrumb line height. That’s why the code you provided didn’t work at first. Once I removed the code to remove the hover line, I didn’t need the code to put the line in, but I tried putting it back to attempt to move the hover line up . . .no luck.


    I have removed the code for moving the main menu down, and changing height of breadcrumb line to no avail either.



    Try to set the bottom position value of the avia-menu-fx container to 13px.

     bottom: 13px;

    And pull the sub menu container upwards using this css code.

    .av-main-nav ul {
        margin-top: -15px;

    Best regards,


    AH! That seems to do it!

    Thanks again!


    Hi Jon,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,

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

The topic ‘Main menu, color underline when hovering (like the one that is present on active’ is closed to new replies.