Highlight menu item

Hey mvanstee,
Thank you for the link to your page, your Home menu item with the outline around it looks off center because the 5px letter-spacing adds 5px after each letter, so the H is flush to the padding on the left, but the E has an extra 5px letter-spacing before the padding on the right. To correct I recommend removing the 5px padding on the right, so in your css above change the padding to this:
padding: 5px 0 5px 5px !important;
To display the underline add this css:

.av_minimal_header #header_main .avia-menu-fx {
    display: block;
}

To change the hover menu item color add this css:

#top #header #avia-menu .menu-item:hover > a > .avia-menu-text {
    color: #003D1D;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I’m seeing this css:

#header .av-main-nav .current-menu-item > a > .avia-menu-text {
    border: 1px solid rgba(0,61,29) !important;
    margin-left: 1px !important;
    padding: 5px !important;
    background-color: rgba(0,0,0,0) !important;
    border-radius: 4px !important;
}

note the padding is still padding: 5px !important; please note that this is a different rule than the one you posted above, as I look closer you have two rules that are very similar, so please look for this one.

Best regards,
Mike

Hi,
Please try this, after applying the css, please clear your browser cache and check.

#top #header #header_main .av-main-nav .current-menu-item > a > .avia-menu-text {
    border: 1px solid rgba(0,61,29) !important;
    margin-left: 1px !important;
    padding: 5px 0 5px 5px !important;
    background-color: rgba(0,0,0,0) !important;
    border-radius: 4px !important;
}
#top #header #avia-menu .menu-item:hover > a > .avia-menu-text {
    color: #003D1D;
}

If this doesn’t help please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Please include an admin login in the Private Content area so I can check your css.

Best regards,
Mike

Hi,
To add the underline effect please add this css:

.av_minimal_header #header_main .avia-menu-fx {
    display: block;
}

The border around your menu item is added by your css: border: 1px solid rgba(0,61,29) !important;
but you have the same css added twice so you will need to remove both of them:

this is also the reason the padding issue with the menu text, in one place you corrected the padding to padding: 5px 0 5px 5px !important; but not in the other place, this is why I asked for a login to help you remove this other css.

Best regards,
Mike

Hi,
Thanks for the login, I removed your duplicate css and adjusted the remainder css so instead of having a box around the active menu item it now is green with a green line under it.
Please clear your browser cache and check.

Best regards,
Mike