Color menu with custom links

  • Resolved vialexa

    (@vialexa)


    4 years, 4 months ago

    Hello all ??

    The page with the menu problem : https://aap17810.fr/
    Thème : Zakra (all with elementor).

    The menu was okay before I had “custom links”.
    As you can see, the custom links put the menu title in red (basically color as defined with text has link behind). But I would like to have like the rest of the menu : menu color in white and when I pass the mouse, it became in red.

    The steps I already done :
    I inspected element and the first thing arrive is the css below >>> And I decided to change the red color by the white.
    .tg-primary-menu > div ul li:active > a, .tg-primary-menu > div ul > li:not(.tg-header-button-wrap).current_page_item > a, .tg-primary-menu > div ul > li:not(.tg-header-button-wrap).current_page_ancestor > a, .tg-primary-menu > div ul > li:not(.tg-header-button-wrap).current-menu-item > a, .tg-primary-menu > div ul > li:not(.tg-header-button-wrap).current-menu-ancestor > a {
    color: #FFFF;
    }

    If I put this code above, unfortunaly, the custom link stays always in white even if I pass the mouse on it. I would prefer to hazmonize all the menu and have white menu and red when I’m on page or when I pass the mouse on the menu.

    Do you know if that possible ?
    Thanks for help per advance ??

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @vialexa

    As the custom links you have added are active i.e those menu items have a class of current-menu-item and the active color is red.

    You can add either CSS class via the Dashboard >Appearance > Menus
    to those custom links and targeting those CSS classes and can add custom CSS or child CSS selector also can be used to change the color of those custom links.

    Do let us know if you need any further help.

    Best Regards,

    Thread Starter vialexa

    (@vialexa)

    Hi @rohitkc32 ! Thanks a lot for your help ??

    I put the class name “menulink” in my custom link (Nos professeurs / Actualités / Contact) with this CSS code in style.css child theme :
    .menulink {
    color : #ffffff !important;
    }

    But it doesn’t work. I tried too :
    .menulink menu {
    color : #ffffff !important;
    }

    Do you know if I missed something ?

    Hi @vialexa,

    Please try adding this custom CSS in the Additional CSS box and test:

    .tg-primary-menu > div ul > li:not(.tg-header-button-wrap).current_page_item.menulink > a,
.tg-primary-menu > div ul > li:not(.tg-header-button-wrap).current-menu-item.menulink > a{
    color: #fff;
}

    REF: https://docs.zakratheme.com/en/article/how-to-add-custom-css-1tz5vyt/

    Kind Regards,
    ThemeGrill Support

    Thread Starter vialexa

    (@vialexa)

    Hi @asheshmagar ,

    Thanks a lot for your help !
    With your code, all my menu is white now. Thank you ??

    Do you know how it’s possible to have the “hover” in red now, when I pass the mouse in title (as Actualités / Tarifs / Galerie in menu) ?

    @vialexa,

    It seems you have already added the required CSS code for the hover color of those menu items. If you get any query or confusion while using Zakra theme, please feel free to ask. ??

    Kind Regards,
    ThemeGrill Support

    Thread Starter vialexa

    (@vialexa)

    Sorry, I just found the solution. Your code helps the most ! I just added the hover.

    Thanks a lot for your help. Have a nice evening ??

    Glad you found out the solution. ?? Please do let us know for further queries later.

    Sincerely,
    ThemeGrill Support

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Color menu with custom links’ is closed to new replies.

Tags