[Resolved] Mobile Menu and Mobile Header Color for Different Page

Home Forums Support [Resolved] Mobile Menu and Mobile Header Color for Different Page

Home Forums Support Mobile Menu and Mobile Header Color for Different Page

  • This topic has 45 replies, 3 voices, and was last updated 6 years ago by Tom.
Viewing 15 posts - 31 through 45 (of 46 total)
  • Author
    Posts
  • #504636
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

    #528938
    elsa

    Hi Tom,
    Previously it worked well. But when I change the color in customizer for any other page excluding kids, the color of mobile menu for kids also changing. How to resolve this?

    #529329
    Tom
    Lead Developer
    Lead Developer

    It may change while in the Customizer, as the live preview applies the colors. However, it shouldn’t change on the live website.

    #529685
    elsa

    Hi Tom,
    I checked from my mobile phone where the customizer wasn’t active; the color changed. Is it an issue of hierarchy?

    #529765
    Tom
    Lead Developer
    Lead Developer

    The mobile menu on the kids page for me is #01b1af.

    Or are you talking about the slideout navigation? It had a big update in 1.6, so it could be that.

    In your custom CSS, everywhere you have this:

    .main-navigation

    Duplicate it with this:

    .main-navigation,
    .main-navigation.slideout-navigation

    So if you have this:

    .main-navigation li a {
    
    }

    Do this:

    .main-navigation li a,
    .main-navigation.slideout-navigation li a {
    
    }
    #529958
    elsa

    Hi Tom,
    it doesn’t work. I changed the background first, but didn’t work. Here is the code.

    @media (max-width: 768px) {
        /* CSS in here for mobile only */
    
    /* MENU ITEMS */
    .main-navigation,
    .main-navigation.slideout-navigation {
    	background-color: #01b1af;
    }
    
    .main-navigation .navigation-search input[type="search"], 
    .main-navigation .navigation-search input[type="search"]:active {
    	color: #FFFFFF;
    	background-color: #cceded;
    }
    
    .main-navigation .navigation-search input[type="search"]:focus {
    	color: #01b1af;
    	background-color: #FFFFFF;
    }
    
    .main-navigation .main-nav ul li a, 
    .main-navigation .menu-toggle {
    	color: #FFFFFF;
    }
    
    /* SUB-NAVIGATION */
    
    .main-navigation.slideout-navigation ul ul li a {
    	background: #FFFFFF;
    	color: #01b1af;
    }
    
    /* MENU ITEM HOVER */
    
    .main-navigation .main-nav ul li:hover > a, 
    .main-navigation .main-nav ul li:focus > a,
    .main-navigation .main-nav ul li.sfHover > a {
    	color: #FFFFFF;
    	background-color: #cceded;
    }
    
    /* SUB-NAVIGATION HOVER */
    
    .main-navigation .main-nav ul ul li:hover > a, 
    .main-navigation .main-nav ul ul li:focus > a,
    .main-navigation .main-nav ul ul li.sfHover > a {
    	color: #FFFFFF;
    	background-color: #01b1af;
    }
    
    /* CURRENT ITEMS */
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    	color: #01b1af;
    	background-color: #cceded;
    }
    
    .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: #01b1af;
    	background-color: #FFFFFF;
    }
    
    /* SUB-NAVIGATION CURRENT ITEMS */
    
    .main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    	color: #01b1af;
    	background-color: #cceded;
    }
    
    .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: #01b1af;
    	background-color: #cceded;
    }
    }

    And here is the code to call it.

    /**
     * Enqueue Kids.css
     */
    add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts', 200 );
    function mytheme_styles_scripts() {
        if ( is_page( 'Kids' ) || is_product_category( 'Kids' ) || has_term ('kids', 'product_cat')) {
            wp_enqueue_style( 'kids', trailingslashit( get_stylesheet_directory_uri() ) . 'kids.css' );
        }
    }
    #530156
    Tom
    Lead Developer
    Lead Developer

    It’s working for me, I just had to clear my browser cache first.

    #530593
    elsa

    That’s valid, thanks! I still have problem though. The letter still blue, my code is wrong.

    /* SUB-NAVIGATION */

    .main-navigation.slideout-navigation ul ul li a {
    background: #FFFFFF;
    color: #01b1af;
    }

    /* MENU ITEM HOVER */

    .main-navigation .main-nav ul li:hover > a,
    .main-navigation .main-nav ul li:focus > a,
    .main-navigation .main-nav ul li.sfHover > a {
    color: #FFFFFF;
    background-color: #cceded;

    #530595
    elsa

    Or better if someone can provide the whole code similar to this link but for slideout. Thanks in advance.

    https://docs.generatepress.com/article/changing-navigation-colors/

    #530599
    Tom
    Lead Developer
    Lead Developer

    You can copy that code completely, and simply replace all .main-navigation instances with .main-navigation.slideout-navigation.

    Then it will apply to the slideout navigation.

    #530607
    elsa

    Thanks Tom, it’s working. Except this one. I don’t know why it doesn’t work.

    /* SUB-NAVIGATION */
    
    .main-navigation ul ul li a,
    .main-navigation.slideout-navigation ul ul li a {
    	background: #FFFFFF;
    	color: #01b1af;
    }

    Neither does this.

    /* SUB-NAVIGATION */
    
    .main-navigation.slideout-navigation ul ul li a {
    	background: #FFFFFF;
    	color: #01b1af;
    }
    #530608
    Tom
    Lead Developer
    Lead Developer

    Try adding body in front of it:

    .main-navigation ul ul li a,
    body .main-navigation.slideout-navigation ul ul li a {
    	background: #FFFFFF;
    	color: #01b1af;
    }
    #530613
    elsa

    I have updated it, but still doesn’t work.

    #530624
    Tom
    Lead Developer
    Lead Developer

    Something strange going on. I would just use !important:

    .main-navigation ul ul li a,
    .main-navigation.slideout-navigation ul ul li a {
    	background: #FFFFFF;
    	color: #01b1af !important;
    }
    #530670
    elsa

    Resolved! Thanks so much!

Viewing 15 posts - 31 through 45 (of 46 total)
  • You must be logged in to reply to this topic.