Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 10, 2018 at 5:57 pm #924966
    navindesigns

    Hi,

    On my site, I have created a code that gives the current/select page menu an out line color. Here is the code:

    /*CHANGE ACTIVE MENU – BORDER – MARGIN – PADDING – BACKGROUND-COLOR – BORDER-RADUIS */
    #header .av-main-nav .current-menu-item > a > .avia-menu-text
    {border:2px solid rgba(104, 219, 215, 1) !important;margin-left:5px !important;padding:12px !important;background-color: rgba(255, 255, 255, 1) !important;border-radius: 20px !important;}

    I would like the SAME EXACT treatment on hover. On hover the menu items would look the same as the selected/highlighed menu

    How do I achieve that?

    March 10, 2018 at 7:11 pm #924986
    Mike

    Hey navindesigns,
    Try this code in the General Styling > Quick CSS field:

    #header .av-main-nav > li > a > .avia-menu-text:hover {
border:2px solid rgba(104, 219, 215, 1) !important;
padding:12px !important;
background-color: rgba(255, 255, 255, 1) !important;
border-radius: 20px !important;
}
#header .av-main-nav > li > a:hover {
padding: 0 1px !important;
}

    Best regards,
    Mike

    March 10, 2018 at 7:19 pm #924987
    navindesigns

    that works but there is one issue
    on hover there seem to be like a jump to the right. all the menu items are being shifted to the right a little

    Home

    also how do I change the menu font color to #68dbd7 when hover

    March 11, 2018 at 8:43 pm #925256
    Mike

    Hi,
    I have corrected the error with this css:

    
#header .av-main-nav .current-menu-item > a > .avia-menu-text 
{border:2px solid rgba(104, 219, 215, 1) !important;margin-left:5px !important;padding:10px !important;background-color: rgba(255, 255, 255, 1) !important;border-radius: 20px !important;}


#header .av-main-nav > li > a > .avia-menu-text:hover {
border:2px solid rgba(104, 219, 215, 1) !important;
padding:10px !important;
background-color: rgba(255, 255, 255, 1) !important;
border-radius: 20px !important;
}

#header .av-main-nav > li > a {
padding:0px !important;
}

#header .av-main-nav > li > a > .avia-menu-text {
padding:12px !important;
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    March 12, 2018 at 4:33 am #925320
    navindesigns

    That works

    Thanks

    March 12, 2018 at 9:52 am #925403
    Nikko

    Hi,

    Glad that Mike helped you :) Let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.