Problem with text color in submenu.

  • Resolved boppar

    (@boppar)


    2 years, 7 months ago

    I have an issue with text color in the navigation menu.

    * In my navigation menu I have “Information”. All text in the main menu are white.
    * “Information” has a submenu. All text in this submenu are light blue. When hovering an item it turns dark blue.
    * In this submenu I have “Praktisk information” which has another submenu. All text in this second submenu are also light blue. When hovering an item it turns dark blue.
    * SO FAR IT WORKS WELL.
    * The problem is when entering the submenu of “Praktisk information” the item “Praktisk information” becomes white instead of staying blue. It becomes invisible as the background is white.

    # My issue is that I want “Praktisk information” to continue to stay blue when entering it’s submenu. How do I resolve this?

    Explaining images:
    https://ibb.co/3RgvjzB

    https://ibb.co/VxWmM74

    • This topic was modified 2 years, 7 months ago by boppar.

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

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

  • Hi there!

    I see that the sub-menu items are getting affected by a custom CSS that you’ve added:

    
.main-navigation ul li:hover > a {
    color: #FFFFFF !important;
}

    You could replace the above CSS with the CSS code below:

    
#menu-navigationsmeny > li:hover > a {
    color: #fff !important;
}

    I hope this helps! ??

    Thread Starter boppar

    (@boppar)

    Hello @kaushiksomaiya

    I’m impressed of your skills. It works great.
    Thank you for being so helpful!

    Thread Starter boppar

    (@boppar)

    Hi @kaushiksomaiya

    I noticed another similar issue, on mobile view.

    Below is the submenu “Praktisk information”:
    https://ibb.co/2hTyfxD

    When opening that submenu the text “Praktisk information” turns the same blue as the background.
    https://ibb.co/XjDwVfC

    I can’t find what’s causing this. Do you have any idea?

    Hi there!

    Thanks for the kind words ?? Glad to help out.

    I see that the CSS below is causing that issue on mobile: 

    
.main-navigation ul li:hover > a {
  background-color: rgb(77, 167, 240);
}

    You could replace it with the CSS code below:

    
.handheld-navigation > ul > li:hover > a{
    background-color: rgb(77, 167, 240);
}

    I hope this helps!

    Thread Starter boppar

    (@boppar)

    Hello @kaushiksomaiya

    Yes, it solved the problem. Thank you once again!

    Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hey @boppar

    That’s great to hear you have solved this and we’ll therefore mark this forum topic as resolved.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Problem with text color in submenu.’ is closed to new replies.

Tags