- This topic has 45 replies, 3 voices, and was last updated 6 years ago by Tom.
-
AuthorPosts
-
February 24, 2018 at 9:34 am #504636TomLead DeveloperLead Developer
You’re welcome 🙂
March 24, 2018 at 12:29 am #528938elsaHi 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?March 24, 2018 at 9:00 am #529329TomLead DeveloperLead DeveloperIt may change while in the Customizer, as the live preview applies the colors. However, it shouldn’t change on the live website.
March 24, 2018 at 6:51 pm #529685elsaHi Tom,
I checked from my mobile phone where the customizer wasn’t active; the color changed. Is it an issue of hierarchy?March 24, 2018 at 11:00 pm #529765TomLead DeveloperLead DeveloperThe 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 { }
March 25, 2018 at 6:21 am #529958elsaHi 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' ); } }
March 25, 2018 at 9:26 am #530156TomLead DeveloperLead DeveloperIt’s working for me, I just had to clear my browser cache first.
March 25, 2018 at 8:56 pm #530593elsaThat’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;March 25, 2018 at 8:57 pm #530595elsaOr 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/
March 25, 2018 at 9:00 pm #530599TomLead DeveloperLead DeveloperYou 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.
March 25, 2018 at 9:20 pm #530607elsaThanks 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; }
March 25, 2018 at 9:25 pm #530608TomLead DeveloperLead DeveloperTry 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; }
March 25, 2018 at 9:44 pm #530613elsaI have updated it, but still doesn’t work.
March 25, 2018 at 10:35 pm #530624TomLead DeveloperLead DeveloperSomething 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; }
March 26, 2018 at 12:12 am #530670elsaResolved! Thanks so much!
-
AuthorPosts
- You must be logged in to reply to this topic.