Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 16, 2020 at 5:10 pm #1184985
    zizibe1

    Hi,

    In my logo area, the colors of the text of the main menu items are:

    inactive:
    – font color: black (#000000)
    – hover color: grey (#b2b2b2)

    active:
    – font color: green (#039934)
    – hover color: dark green (#006F00)

    One of the menu items is a parent menu link (not clickable) which serves as label for three submenu items.

    Here’s what I would like to change (changes are marked in bold):

    1.
    Color of text of parent menu link:

    inactive:
    – font color: black (#000000)
    – hover color: black (#000000)

    active:
    – font color: green (#039934)
    – hover color: green (#039934)

    2.
    Colors of text of three submenus items (here, the colors should be independent of the parent menu link as well as independent of each other):

    inactive:
    – font color: black (Hex #000000)
    – hover color: grey (Hex #b2b2b2)

    active:
    – font color: green (Hex #039934)
    – hover color: dark green (Hex #006F00)

    3.
    Burger Menu (overlay style): For the text of the parent menu link and the three submenus items, the same colors should be used as mentioned above, only with the difference that all the black texts should be white (because the background of the burger menu is black).

    Important! The changes concern only the parent menu link and the three submenus items. The other main menu items should stay as they are at present.

    How can I achieve this?

    Best regards,

    zizibe1

    February 18, 2020 at 12:17 pm #1185614
    Yigit

    Hey zizibe1,

    Thanks for contacting us!

    I added following custom CSS code to bottom of Quick CSS field

    #top #header .av-main-nav > li#menu-item-5600:hover > a .avia-menu-text {
    color: #000000;
}
#top .header_color .main_menu .menu ul .current-menu-item > a { 
    color: #039934; 
} 
#top .header_color .main_menu .menu ul .current-menu-item > a:hover { 
    color: #006F00 !important; 
}

    Also adjusted 2 selectors in your existing code.

    Please review your website :)

    Best regards,
    Yigit

    February 18, 2020 at 9:25 pm #1185838
    zizibe1

    Hi Yigit,

    Thank you very much for the changes.

    In active state, the font color of the parent menu link is green (#039934) and the hover color should also be green (#039934), not dark green (#006F00).

    The colors of the text of the three submenu items as well as the other main menu items are as requested. Please don’t change them.

    The burger menu should be like this (changes are marked in bold):

    a)
    The parent menu link should be hidden, the three submenu items should be shown.

    b)
    Colors of text of three submenus items:

    inactive:
    – font color: white (#ffffff)
    – hover color: grey (Hex #b2b2b2)

    active:
    – font color: green (Hex #039934) → only the active submenu item should be green, the other two submenu items should be white
    – hover color: dark green (Hex #006F00) → only the active submenu item should be dark green, the other two submenu items should be white

    The colors of the text of the other main menu items in the burger menu should stay as they are at present.

    Many thanks in advance.

    Best regards,

    zizibe1

    February 22, 2020 at 7:48 pm #1187009
    Mike

    Hi,
    Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top #header .av-main-nav > li#menu-item-5600:hover > a .avia-menu-text {
    color: #000000;
}
#top .header_color .main_menu .menu ul .current-menu-item > a { 
    color: #039934; 
} 
#top .header_color .main_menu .menu ul .current-menu-item > a:hover { 
    color: #039934 !important; 
}

    This seems to mach your requirements, After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    February 23, 2020 at 4:15 pm #1187114
    zizibe1

    Hi Mike,

    Thank you for the new code.

    I went to the Quick CSS field, replaced the previous code and it worked.

    I decided to get rid of the active hover color dark green (#006F00) because I think the navigation of the menu is clearer that way. So I removed the following code from the Quick CSS field:

    /* hover font color of the menu item of the current page */
#top #header .av-main-nav > li.current-menu-item:hover > a > span.avia-menu-text {
    color: #006F00 !important; 
}

    Now back to my other issue:

    In the burger menu, the parent menu link “Leistungen” should be hidden, but the three submenu items should be shown.

    How can I achieve this?

    Best regards,

    zizibe1

    February 24, 2020 at 12:44 pm #1187293
    Mike

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

    .av-burger-overlay li.menu-item-5600 > a {
	display: none !important; 
}

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

    Best regards,
    Mike

    February 24, 2020 at 9:40 pm #1187498
    zizibe1

    Hi Mike,

    Thank you for the code.

    I added it to the Quick CSS field and it worked.

    In the burger menu, the colors of the three submenu items are currently:

    inactive:
    – font color: white (#ffffff)
    – hover color: grey (#b2b2b2)

    active:
    – font color: green ( #039934) → only the active submenu item should be green, the other two submenu items should be white
    – hover color: dark green (#3b7841) → only the active submenu item should be dark green, the other two submenu items should be white

    How can I adjust this?

    Please find a screenshot in the private content area.

    Best regards,

    zizibe1

    February 25, 2020 at 11:50 am #1187651
    Mike

    Hi,
    Please try going to your menus, and creating a new mobile menu like your current main menu but with no child menu items and no “LEISTUNGEN”.
    Please see the screenshot in Private Content area.
    Then go to Enfold Theme Options > Main Menu > General > Alternate Menu for Mobile and select this new menu as your mobile menu.

    Best regards,
    Mike

    February 27, 2020 at 6:28 pm #1188542
    zizibe1

    Hi Mike,

    It worked great. Thank you very much for your support.

    You can close this thread now.

    Best regards,

    zizibe1

    February 27, 2020 at 6:29 pm #1188548
    Yigit

    Hi,

    Glad we could help! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Colors of parent menu link and submenus items’ is closed to new replies.