Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #674302

    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?

    #675405

    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

    #675845

    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?

    #675923

    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.

    #675954

    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

    #675983

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

    #676091

    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

    #676499

    Thank you! Worked like a charm.

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