Archived topic
Slide Out Navigation Text
12 replies · Started by Jason Westbrook on November 1, 2017
Hi,
How would I make the slide-out navigation text a specific color I can control separate from the other defaults set in the customization options? Ideally I can control that text color so its not effected by any other presets anywhere.
Thanks for the help!
Also the ability for the "x" on top of the slideout to be same color as slideout text only.
Hi there,
You should be able to use the CSS here: https://docs.generatepress.com/article/changing-navigation-colors/
Just replace .main-navigation with .main-navigation.slideout-navigation.
Not sure what you mean by "x"? The one by the text MENU when slideout navigation is activated?
Leo,
I tried a few different things and couldn't seem to get it to do anything. I admit I am a little lost. I'd like the primary navigation text color to stay the same but change the slide-out nav text to white. Did I miss something?
Sorry for the inconvenience.
Try this:
.main-navigation.slideout-navigation .main-nav ul li a,
.main-navigation.slideout-navigation .menu-toggle {
color: #FFFFFF;
}
Bro that worked great. Two more small requests and I am out of your hair.
1. How would I place a "white x" above the slide-out menu so when users want to close the slide-out they can click off canvas or click the x.
2. Also what would the css be to had a hover effect on the slide-out text so it goes a little darker than white when hovered?
Update:
I was able to get the "x" to work. Just need help with
#2..."Also what would the css be to had a hover effect on the slide-out text so it goes a little darker than white when hovered?"
*Noticed when I click the "x" on the slid-eout it works but changes to the hamburger menu on slide-out. Is that a bug or something I did wrong?
This should change the hover color:
.main-navigation.slideout-navigation .main-nav ul li a:hover {
color: #ffffff;
}
Not sure what you mean? Not see anything wrong?
Thanks that worked great! Any idea on the weird bug I seem to be experiencing?
To replicate:
1. Click on "menu" for slide-out to trigger.
2. Click the X to close out slid-eout.
3. Click Menu for slid-eout again and it changes to hamburger icon instead of staying on the x icon.
Not sure if I'm seeing it? http://www.screencast.com/t/6ZOmdBZ5
Try it on mobile or move screen down to mobile version. You'll see what I mean. Very weird.
update: I changed it from fa-times to fa-angle-left and its not doing it anymore. weird.
Hmm glad you got it working!