Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 18, 2018 at 8:55 pm #928788
    kwanumzen

    Hi,

    I have asked already for help and got a solution for it.

    Namely: if I style the menu items accordingly to the color scheme I’m using than I set the color like:

    #av-burger-menu-ul .avia-menu-text {
&:hover {
    color: black!important;
  }
font-size:18px!important;
font-family:PT Sans!important;
color: #df8020!important; 
}

    with the intention that every menu item has orange background color but when hover the color of the text should change into black. This works quite well if I do it like
    #av-burger-menu-ul:hover, .avia-menu-text:hover { ...
    but this does NOT color the text if the mouse cursor is not exactly over the text, i.e. this class. I add the .a with a comma, but than all anchors are colored as well.

    So, what is the correct styling to have correctly specified the colors with hover effect? (Plz still the initial problem is solved)

    thx
    roland

    March 19, 2018 at 6:21 pm #929206
    Vinay

    Hey kwanumzen,

    Please replace your code with the below code:

    #av-burger-menu-ul > a:hover .avia-menu-text {
    color: #ffffff!important;
}

    Best regards,
    Vinay

    March 20, 2018 at 10:08 am #929649
    kwanumzen

    Hi Vinay,

    /* menu-resize for different screen sizes */
#av-burger-menu-ul .avia-menu-text {
font-size:18px!important;
font-family:PT Sans!important;
color: #df8020!important; 
}
#av-burger-menu-ul > a:hover .avia-menu-text {
    color: #ffffff!important;
}

    does not work. The first style I need for the font. So I cannot replace it. I need a fix for

    a) if the display is in desktop ==> text color should change when I hover (over the text as well as over the anchor)
    b) if the display is in mobile size ==> same as above + font should NOT change (previous ticket)

    thx
    roland

    March 21, 2018 at 3:56 pm #930636
    Vinay

    Hi,

    We have added the below code to Quick CSS
    Please update the color value to suit your design :)

    .main_menu ul li ul a .avia-menu-text {
    color: #333!important;
}
#av-burger-menu-ul a:hover .avia-menu-text {
    color: #ffffff!important;
}

    Best regards,
    Vinay

    March 22, 2018 at 11:29 pm #931702
    kwanumzen

    Hi Vinay,

    thx for fixing the issue.
    Plz close this ticket.
    :-)

    roland

    March 22, 2018 at 11:50 pm #931705
    Jordan Shannon

    Hi,

    I’m glad you were able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Menu styling’ is closed to new replies.