Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 2, 2018 at 4:20 pm #1017140
    Freek

    Hi,

    I have a mega menu and when I hover over the mailmen the megamenu is shown. Now I want to change the color of the fullwidth underline and I used the following code, bur with this code the only color change is the underline of the menu item itself and not from the full width mega menu.
    code:
    li#menu-item-393 .avia-menu-fx { background-color: #056969; }

    see: website mockup
    You can see this behavior when you hover over the menu item “ZAKELIJK”

    Is it possible to change the color of the fullwidth mega menu underline/line?

    THX Freek

    October 3, 2018 at 4:40 am #1017322
    Rikard

    Hey Freek,

    Please try the following in Quick CSS under Enfold->General Styling:

    #top #header .avia_mega_div > .sub-menu {
  border-top:2px solid red !important;
}

    Best regards,
    Rikard

    October 3, 2018 at 6:44 am #1017360
    Freek

    Yes this works for all menu items where a submenu exists but now i want this for just one menu item (menu-item-393).
    Green for megamenu under the main menu item “Particulier” and blue under the main menu item “zakelijk”
    I tried the following code, but no luck:

    li#menu-item-393 .avia-menu-fx .avia_mega_div > .sub-menu { background-color: #056969;
border-top:5px solid red!important;
}

    Is it possible?
    THX Freek

    • This reply was modified 6 years, 2 months ago by Freek.
    October 3, 2018 at 7:37 am #1017378
    Rikard

    Hi,

    Thanks for the clarification. Please try this instead:

    #menu-item-393 .sub-menu {
  border-top:2px solid red !important;
}

    Best regards,
    Rikard

    October 3, 2018 at 8:00 am #1017383
    Freek

    Perfect! 2 more questions:
    1. Also all sub-submenu items get the top border see screenshot. how to avoid this?
    2. How can i change the color of the active state of “zakelijk” to the desired color? Now it is the same as all other menu items in active state.

    Thanks again for the awesome support!
    Freek

    October 3, 2018 at 9:48 am #1017413
    Rikard

    Hi,

    1. Please try this instead:

    #menu-item-393 > .sub-menu {
  border-top:2px solid red !important;
}

    2. Please try this CSS:

    #menu-item-393 .avia-menu-fx {
  border-color: red !important;
}

    Best regards,
    Rikard

    October 3, 2018 at 12:30 pm #1017504
    Freek

    Hi,

    Unfortunately the above code does not work.
    1. If I add the “>” sign, the line is reset to default. If I remove the “>” sign, it works but with multiple top borders in sub/submenu
    2. Both active and hover state does not change with this setting.

    THX Freek

    October 4, 2018 at 9:17 am #1017773
    Nikko

    Hi Freek,

    1. The > didn’t work because you used a mega menu so instead of using:

    #menu-item-393 > .sub-menu

    try to use:

    #menu-item-393 .avia_mega_div > .sub-menu

    2. try using this code:

    #menu-item-393 .avia-menu-fx {
    background-color: red !important;
}

    Hope it helps.

    Best regards,
    Nikko

    October 4, 2018 at 4:45 pm #1017961
    Freek

    That did the trick! Thanks again for the great support.
    Freek

    October 4, 2018 at 5:00 pm #1017967
    Nikko

    Hi Freek,

    Glad that we could help :)
    Feel free to comeback if you need further assistance.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Full-width underline color megamenu’ is closed to new replies.