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

[elsa]

Hi,
How to set different color for specific page of mobile menu and mobile header color. Thanks.

[Leo]

Hi there,

Can you guide me to the page you are referring to so I can give you the code?

Let me know.

[elsa]

Hi Leo,
https://spruceupspace.com; and
https://spruceupspace.com/kids

Thanks so much.

[Leo]

Actually I’m not sure the how many colors you want to change but all the menu CSS are here: https://docs.generatepress.com/article/changing-navigation-colors/

You just have to wrap it with media query so it’s mobile only:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

As for page specific, if you use Tom’s Simple CSS plugin, it gives you a CSS metabox each page so the CSS in there are page specific.

[elsa]

Hi Leo,
Which CSS Plugin is it?

[Leo]

This one: https://docs.generatepress.com/article/adding-css/#simple-css

[elsa]

Hi Leo,
Thanks for your help, it’s working! What about product category page, I can’t seem to edit the style with CSS plugin. How to enable it in category archive page?

[Leo]

Yeah those are index pages (blog, archive) so metabox won’t work.

If you are wanting all category pages to, then add .category in front of the selector, like this for example:

.category .main-navigation .main-nav ul li a, 
.category .main-navigation .menu-toggle {
	color: #FFFFFF;
}

[elsa]

Hi Leo,
How to select particular category page such as category “KIDS” only? Thanks.

[Leo]

Try .category-kids

[elsa]

Would you help me to give conditional tag for this, as this for several categories? thanks.

[elsa]

Never mind, I’ve found a way. Thanks!

[elsa]

Hi Leo,
Turns out I can’t resolve this. So I add this snippet but didn’t work. How to make it right?

function mytheme_styles_scripts() {

if ( is_page( ‘Kids’ ) || is_product_category( ‘Kids’ ) || has_term (‘kids’, ‘product_cat’))
{
wp_enqueue_style( ‘kids’, get_template_directory_uri() .’/Custom Junita/Kids.css’,false,null,’all’);
}
}

//hook the function to wp_enqueue_scripts action hook
add_action( ‘wp_enqueue_scripts’, ‘mytheme_styles_scripts’ );

[Leo]

Hmm you don’t need the snippet to change the mobile menu and mobile header color on category pages.

[elsa]

Hi Leo,
The different page will be more than 200 pages out of 400. So if I insert CSS one by one, it will be lots of hassle. Please help to resolve this. Here’s my code.

function mytheme_styles_scripts() {

wp_register_style( ‘kids’, trailingslashit( get_stylesheet_directory_uri() ).’kids.css’,__FILE__);
}

if ( is_page( ‘Kids’ ) || is_product_category( ‘Kids’ ) || has_term (‘kids’, ‘product_cat’)) {
wp_enqueue_style( ‘kids’);
}
//hook the function to wp_enqueue_scripts action hook
add_action( ‘wp_enqueue_scripts’, ‘mytheme_styles_scripts’ );

[Author]

Posts