[Resolved] Slide Out Navigation Text

[Jason Westbrook]

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!

[Jason Westbrook]

Also the ability for the “x” on top of the slideout to be same color as slideout text only.

[Leo]

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?

[Jason Westbrook]

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.

[Leo]

Try this:

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

[Jason Westbrook]

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?

[Jason Westbrook]

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?

[Leo]

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?

[Jason Westbrook]

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.

[Leo]

Not sure if I’m seeing it? http://www.screencast.com/t/6ZOmdBZ5

[Jason Westbrook]

Try it on mobile or move screen down to mobile version. You’ll see what I mean. Very weird.

[Jason Westbrook]

update: I changed it from fa-times to fa-angle-left and its not doing it anymore. weird.

[Leo]

Hmm glad you got it working!

[Author]

Posts