[Resolved] color of parent item changes when hovering over sub item

Home Forums Support [Resolved] color of parent item changes when hovering over sub item

Home Forums Support color of parent item changes when hovering over sub item

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

    Hi!
    I am experiencing a problem with menu colors: When I hover over a menu sub item the color and background of the parent item changes. See here: http://all-projekt.797.at – trigger the sub menu for the parent item “Sachgebiete” and hover over one of the sub items – the color and background of “Sachgebiete” change allthough they shouldn’t.
    Could you please help?
    Thanks in advance!
    Ines

    GeneratePress 2.1.3
    #616341
    Leo
    Staff
    Customer Support

    Hi there,

    Can you comment out all the CSS you’ve added for the main navigation and see if it solves the issue?

    /*Menue*/
    div.inside-navigation{
    	background-color: #FFFFFF;
    	color:#545454;
    	border-bottom: 1px solid #545454;
    }
    
    /*.main-navigation .main-nav ul li   > a:hover, 
    .main-navigation .main-nav ul li   > a:focus{
    	background-color: white;
    
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    	background-color: white;
    }
    
    main-navigation a, .menu-toggle, .site-description, .widget-title, h3 {
        text-transform: none;
    	font-size: 16px;
    
    }
    
    a:visited {
        color: transparent;
    }*/
    
    /* MENU ITEMS */
    .main-navigation {
    	background-color: white;
    }
    
    .main-navigation .main-nav ul li a, 
    .main-navigation .menu-toggle {
    	color: #545454;
    	background-color: white;
    }
    
    /* SUB-NAVIGATION */
    
    .main-navigation .main-nav ul ul li a {
    	background-color: white;
    	color: #545454;
    }
    
    /* MENU ITEM HOVER */
    
    .main-navigation .main-nav ul li > a:hover, 
    .main-navigation .main-nav ul li > a:focus,
    .main-navigation .main-nav ul li.sfHover > a {
    	color: #c70000;
    	background-color:white;
    }
    
    /* SUB-NAVIGATION HOVER */
    
    .main-navigation .main-nav ul ul li > a:hover, 
    .main-navigation .main-nav ul ul li > a:focus,
    .main-navigation .main-nav ul ul li.sfHover > a {
    	color: #c70000;
    	background-color: white;
    }
    
    /* CURRENT ITEMS */
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    	color: #c70000;
    	background-color: white;
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"]:hover > a, 
    .main-navigation .main-nav ul li[class*="current-menu-"]:focus > a, 
    .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
    	color: #c70000;
    	background-color: white;
    }
    
    /* SUB-NAVIGATION CURRENT ITEMS */
    
    .main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    	color: #c70000!important;
    	background-color: white!important;
    }
    
    .main-navigation .main-nav ul ul li[class*="current-menu-"]:hover > a, 
    .main-navigation .main-nav ul ul li[class*="current-menu-"]:focus > a, 
    .main-navigation .main-nav ul ul li[class*="current-menu-"].sfHover > a {
    	color: #c70000!important;
    	background-color: white!important;
    }
    
    .main-navigation .main-nav ul ul .current-menu-item > a:hover,
    .main-navigation .main-nav ul ul .current-menu-parent > a:hover {
        background: white!important;
        color: #c70000!important;
    }

    Don’t think you need a lot of those CSS either as they should be in the customizer options:
    https://docs.generatepress.com/article/colors-overview/

    #616913
    Ines

    Hi Leo!
    Unfortunately I am not using Generatepress Premium on this project, so it’s not possible for me to configure the color options of the menu items in the customizer.
    I commented out all CSS-parts related to the main-nav but this only leaves me with a black background / white font menu which seems to be the default menu design for Generatepress.
    My problem posted above seems to be that the default design is still used for this current parent item after applying my CSS.

    #617418
    Leo
    Staff
    Customer Support

    Replace:

    .main-navigation {
        background-color: white;
    }

    with:

    .main-navigation, .main-navigation ul ul {
        background-color: #fff;
    }
    #617498
    Ines

    Thank you! I just tried that, but nothing changed…
    Any other ideas?

    #617604
    David
    Staff
    Customer Support

    The hover selector in the customiser targets the <li> like so:

    .main-navigation .main-nav ul li:hover > a

    Your CSS is targeting the <a>

    .main-navigation .main-nav ul li > a:hover

    Try updating them to the customiser selectors.

    #618159
    Ines

    Hi David!
    Thank you so much! It’s working now!

    #618473
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.