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

[Leo]

I’m not sure what you mean?

If all of those 200 pages have the same category then we can just select it all using CSS as well?

Can you link me to a couple examples where you want to change?

[elsa]

Hi Leo,
if there is simple code to select all of them, I’d be glad to use it. These are the pages.

All product under category kids for example https://spruceupspace.com/product/wooden-bunny-plate-4-models/
All category archives under kids consists of subcategories for example https://spruceupspace.com/product-category/kids/storage/
Particular Tags archive such as swan, bat, unicor, etc
Pages: Kids -> https://spruceupspace.com/kids/welcome
Blog post under category kids

[Leo]

I can’t get your site to load.

Can you double check?

Thanks!

[elsa]

It’s active. I don’t know why you couldn’t access it.

http://www.spruceupspace.com

[Tom]

If you want to enqueue that file under those conditions, you would do this:

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

This assumes you have a kids.css file in the root directory of your child theme.

[elsa]

Hi Tom,
I don’t know what’s going on but it doesn’t work. I’ve ensured that kids.css is located in the root directory of child theme along with style.css.

I’ve also ensured that the css code is working. When I paste the code on simple CSS metabox on product page, the code is working.

How to identify where the problem is? Do I have to write css file on specific application?

[Tom]

It looks like it’s working for me.

The kids.css is loading on this page: https://spruceupspace.com/kids/welcome

[elsa]

Hi Tom, for that page, I inserted the CSS on simple CSS Metabox. Please open this from mobile phone.

https://spruceupspace.com/product-category/kids/furniture/

[Tom]

You can see the kids.css file loading here: https://www.screencast.com/t/mXFRC5bdFhw

It’s just being overwritten by the CSS you’ve added into Simple CSS.

[elsa]

Hi Tom,
So glad to know that actually it’s loading. When I delete the code from CSS Metabox, the header color went black, unlike what I set on kids.css, supposed to be green. I think it’s still refer to mobile.min.css?ver=2.0.2 instead of kids.css for several part. What I should do then?

[Tom]

I just edited this code: https://generatepress.com/forums/topic/mobile-menu-and-mobile-header-color-for-different-page/page/2/#post-502162

Can you try it instead?

[elsa]

It’s working, so awesome! Thanks Tom!

[elsa]

Hi Tom, there is something else that has not been working yet. For “add to cart” button, add to cart notification, and “Description”; the color still refer to the initial setting on customizer that overwrite kids.css. How to resolve this? For example page:

https://spruceupspace.com/product/banana-bean-bag-chair/

Thanks!

[Tom]

I just made one more edit which should fix that: https://generatepress.com/forums/topic/mobile-menu-and-mobile-header-color-for-different-page/page/2/#post-502162

[elsa]

So cool, it’s working! Thanks so much.

[Author]

Posts