Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 18, 2016 at 6:45 pm #674302
    mgyura

    When you hover on a main level to get the drop down visible and then move the cursor down on the drop down, the background hover state disappears from the main level item, which is the font color white with a white background. How do we maintain the hover color of the text while hovering over the sub menu?

    And how do you have top level nav items have a specific state (in this case white background with maroon text) when you are on child pages under that main level. Does that make sense?

    August 21, 2016 at 7:51 pm #675405
    Josue

    Hey,

    That’s currently a limitation with the simple dropdown menu, however if you convert them to mega menu (using 1 column) we’ll be able to fix this with CSS.

    Best regards,
    Josue

    August 22, 2016 at 4:07 pm #675845
    mgyura

    Thank you, Josue. Creating a mega menu with this particular menu creates problems, though. The issue with using the mega menu is that some child pages do not have child pages themselves so the columns are then blank. If we then create one column, that creates the problem of the menu being too long and bleeding off the page on smaller screens. The client is very specific in their menu content, so we cannot change the structure. Is there a way to have the Mega Menu have hover functions? So when you hover over a child menu, its contents then appear like on a regular menu?

    August 22, 2016 at 6:05 pm #675923
    mgyura

    OK, we came up with a solution to use text descriptions in the empty menu items for the mega menu. Can you tell me how to keep the font color the same for menu items when you hover on the sub menu? Thank you.

    August 22, 2016 at 7:04 pm #675954
    Basilis

    Hi!

    Can you please provide us with a link of your web site, so we can give the code needed?

    Thanks a lot

    Regards,
    Basilis

    August 22, 2016 at 7:29 pm #675983
    mgyura

    I will add it here in the private content. Thank you for your help.

    August 23, 2016 at 12:50 am #676091
    Josue

    Hi,

    Change:

    #top #header .av-main-nav > li:hover > a:hover{
    color: #790304;
}

    To:

    #top #header .av-main-nav > li:hover > a:hover,
#top #header .av-main-nav > li > a.open-mega-a {
    color: #790304;
}

    Best regards,
    Josue

    August 23, 2016 at 4:06 pm #676499
    mgyura

    Thank you! Worked like a charm.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Main menu top level item hover color’ is closed to new replies.