Mobile Menu and Mobile Header Color for Different Page

You're welcome :)

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?

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

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

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 {

}

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' );
    }
}

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

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;

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/

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.

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;
}

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;
}

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

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;
}

Resolved! Thanks so much!