Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 5, 2020 at 1:36 pm #1190421
    kohlidays_kohsamui

    In one of my main menu items, I added an icon on the right to indicate that there is a sub menu.

    #menu-item-1869 > a:after {
    happy: ‘\e877’;
    font-family: ‘entypo-fontello’;
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #50C6DB;
    font-size: 14px;
    }

    #menu-item-1869 > a:hover::after {
    color: #fff !important;
    }

    But when my mouse goes down to hover over the submenu, the icon doesn’t stay white and returns to the original #50C6DB color whereas I want it to stay white.

    Accueil

    Thanks for your help

    March 5, 2020 at 1:37 pm #1190422
    kohlidays_kohsamui

    Web site

    March 5, 2020 at 5:17 pm #1190504
    kohlidays_kohsamui

    Hello

    Nobody can help !!!

    March 5, 2020 at 8:53 pm #1190638
    Victoria

    Hi kohlidays_kohsamui,

    Please refrain from replying to your own thread because it gets pushed back to the end of the queue and moderators won’t be able to provide a response immediately. Please be patient while we go through the rest of the queue. Thank you for your understanding.

    It looks fine on my end
    Image 2020-03-05 at 20.53.25.png

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    March 6, 2020 at 5:40 am #1190734
    kohlidays_kohsamui

    Hello, Victoria.

    I’m sorry. But I’ve noticed repeatedly that often no one answers our inquiries about our clients’ various Enfold accounts. But again, I’m sorry.

    Here are the two screenshots.
    The icon does change color between blue and white when the item menu hovers. But if I scroll down to go to one of the links in the sub menu, the icon turns back to blue while I would like it to stay white.

    March 6, 2020 at 1:12 pm #1190856
    Rikard

    Hi,

    Thanks for the update. Please try this in Quick CSS:

    #top #header .av-main-nav > li:hover > a:after {
    color: #fff !important;
}

    I’m sorry. But I’ve noticed repeatedly that often no one answers our inquiries about our clients’ various Enfold accounts. But again, I’m sorry.

    Could you link to the threads which we haven’t replied to yet?

    Best regards,
    Rikard

    March 7, 2020 at 2:11 pm #1191113
    kohlidays_kohsamui

    Hello, Rikard,

    Thank you, it works perfectly.
    I’m sorry I offended you. You should know that in our web agency, we’ve loved working with Enfold this for many years and sometimes we’re a little too demanding. I’m sorry. I’m sorry.

    March 8, 2020 at 5:34 am #1191210
    Rikard

    Hi,

    Great, I’m glad that the CSS worked.

    About the missing answers; we are not offended, but if you claim that we haven’t replied to your questions then of course we are going to ask you where we haven’t replied. If that is not the case then we can just leave it as it is :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    March 8, 2020 at 9:27 am #1191228
    kohlidays_kohsamui

    Hello Rikard

    Yes, I have one last question on a specific page with a transparent header. The icon remains blue in the static main menu whereas in this case I would like it to be white. (only on static, non hover)

    Do you have a specific CSS for this specific type of page with transparent header ?

    Best regards. Thanks

    March 8, 2020 at 9:30 pm #1191308
    Mike

    Hi,
    Sorry for the late reply, please link to the specific page with the icon issue, I looked through some of your pages but didn’t see it.

    Best regards,
    Mike

    March 9, 2020 at 2:18 am #1191347
    kohlidays_kohsamui

    Hello Mike
    This is the link: Contact page
    Best regards
    Bertrand

    March 9, 2020 at 10:12 am #1191410
    Mike

    Hi,
    Thank you, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top #wrap_all .header_color.av_header_transparency #menu-item-1869 > a:after {
    content: '\e877';
    font-family: 'entypo-fontello';
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #fff;
    font-size: 14px !important;
}
#top #wrap_all .header_color.av_header_transparency #menu-item-1869:hover > a:after {
    content: '\e877';
    font-family: 'entypo-fontello';
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #50C6DB !important; 
    font-size: 14px !important;
}
#top #wrap_all .header_color.av_header_transparency #menu-item-4579 > a:after {
    content: '\e877';
    font-family: 'entypo-fontello';
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #fff;
    font-size: 14px !important;
}
#top #wrap_all .header_color.av_header_transparency #menu-item-4579:hover > a:after {
    content: '\e877';
    font-family: 'entypo-fontello';
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #50C6DB !important; 
    font-size: 14px !important;
}

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

    Best regards,
    Mike

    March 9, 2020 at 12:57 pm #1191483
    kohlidays_kohsamui

    Hello Mike

    Here is what I applied in css for the 2 menu items 1869 and 4579, mentioned by Rikard and you

    #menu-item-1869 > a:after {
    content: ‘\e877’;
    font-family: ‘entypo-fontello’;
    padding-left : 5px;
    padding-right : 1px;
    position : relative;
    color: #50C6DB;
    font-size: 14px !important;
    }

    #menu-item-1869 > a:hover::after {
    color: #fff !important;
    }

    #menu-item-4579 > a:after {
    content: ‘\e877’;
    font-family: ‘entypo-fontello’;
    padding-left : 5px;
    padding-right : 1px;
    position : relative;
    color: #50C6DB;
    font-size: 14px !important;
    }

    #menu-item-4579 > a:hover::after {
    color: #fff !important;
    }

    /* ICON COLOR REMAINS WHITE ON HOVER SUBMENU */

    #top #header .av-main-nav > li:hover > a:after {
    color: #fff !important;
    }

    /* MENU 1869 AND 4579 ON TRANSPARENT HEADER */

    #top #wrap_all .header_color.av_header_transparency #menu-item-1869 > a:after {
    content: ‘\e877’;
    font-family: ‘entypo-fontello’;
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #fff !important;
    font-size: 14px !important;
    }

    #top #wrap_all .header_color.av_header_transparency #menu-item-1869:hover > a:after {
    content: ‘\e877’;
    font-family: ‘entypo-fontello’;
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #50C6DB !important;
    font-size: 14px !important;
    }

    #top #wrap_all .header_color.av_header_transparency #menu-item-4579 > a:after {
    content: ‘\e877’;
    font-family: ‘entypo-fontello’;
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #fff !important;
    font-size: 14px !important;
    }

    #top #wrap_all .header_color.av_header_transparency #menu-item-4579:hover > a:after {
    content: ‘\e877’;
    font-family: ‘entypo-fontello’;
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #50C6DB !important;
    font-size: 14px !important;
    }

    But it doesn’t work on the CONTACT page which is in transparent header
    Contact page submenu hover
    Static ok

    Thanks a lot

    Bertrand

    March 10, 2020 at 10:29 am #1191758
    Mike

    Hi,
    To remove the blue on hover, please remove these two rules from my post above:

    #top #wrap_all .header_color.av_header_transparency #menu-item-1869:hover > a:after {
    content: '\e877';
    font-family: 'entypo-fontello';
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #50C6DB !important; 
    font-size: 14px !important;
}
#top #wrap_all .header_color.av_header_transparency #menu-item-4579:hover > a:after {
    content: '\e877';
    font-family: 'entypo-fontello';
    padding-left: 5px;
    padding-right: 1px;
    position: relative;
    color: #50C6DB !important; 
    font-size: 14px !important;
}

    Then clear your browser cache and check.

    Best regards,
    Mike

    March 10, 2020 at 10:54 am #1191766
    kohlidays_kohsamui

    Hello Mike.

    Everything’s working properly. Thank you very much for your interventions.

    Best regards

    Bertrand

    March 10, 2020 at 2:53 pm #1191855
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘menu-item-xxxx > a:after and icon color’ is closed to new replies.