Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 8, 2022 at 6:11 pm #1339641
    steviger

    Hi Guys,

    It must be something very small but I can not seem to get my head around it today…
    I’d like to have a background color for the main menu items when hovered an when in active state. What I got so far is:

    .main_menu ul:first-child > li > a {font-size: 1rem; font-family: ‘Outfit’, sans-serif; font-weight:400!important; text-transform:uppercase;}

    #top #header #avia-menu > li:hover > a {
    color:#fff;
    background: #fbd965 !important;
    border-radius: 10px
    }

    #top #header .av-main-nav .current_page_item a {
    background: #fbd965;
    color:#fff;
    border-radius: 10px;
    }
    Background does work but I only want it right behind the text (with some padding). Please see screendump for the desired effect

    What’s the trick ;)

    Best regards,

    Steven

    February 9, 2022 at 9:04 am #1339727
    Ismael

    Hey steviger,

    Thank you for the inquiry.

    You should apply the background or style changes to the avia-menu-text element. Please try this css code instead. 

    #top #header .av-main-nav .current_page_item a .avia-menu-text, #top #header #avia-menu > li:hover > a .avia-menu-text {
    background: #fbd965;
    color: #ffffff;
    border-radius: 3px;
    padding: 3px 8px;
}

    Best regards,
    Ismael

    February 9, 2022 at 10:58 am #1339766
    steviger

    Hi Ismael,

    Thanks man! That’s it.

    Regards,

    Steven

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Background color menu link’ is closed to new replies.