Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Slide Out Navigation Text

Home Forums Support Slide Out Navigation Text

  • This topic has 12 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #414454
    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!

    GeneratePress 1.4
    GP Premium 1.4.3
    #414463
    Jason Westbrook

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

    #414582
    Leo
    Staff
    Customer Support

    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?

    #415013
    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.

    #415057
    Leo
    Staff
    Customer Support

    Try this:

    .main-navigation.slideout-navigation .main-nav ul li a, 
    .main-navigation.slideout-navigation .menu-toggle {
    	color: #FFFFFF;
    }
    #415068
    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?

    #415084
    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?

    #415143
    Leo
    Staff
    Customer Support

    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?

    #415179
    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.

    #415275
    Leo
    Staff
    Customer Support
    #415295
    Jason Westbrook

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

    #415309
    Jason Westbrook

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

    #415623
    Leo
    Staff
    Customer Support

    Hmm glad you got it working!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.