Black Friday! Get up to 25% off GP Premium! Learn more ➝

[Support request] Slide out navigation settings or CSS

Home Forums Support [Support request] Slide out navigation settings or CSS

Home Forums Support Slide out navigation settings or CSS

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #351642

    Hi, what is the settings ( or custom CSS ) for a different backround color on the slide out navigation? And how to center the menu in the slide out window?

    – Johannes

    GeneratePress 1.3.48
    Customer Support

    Hi there,

    Try this CSS:

    #generate-slideout-menu {
        background-color: #ffffff;
    .main-navigation.slideout-navigation .main-nav ul li a {
        text-align: center;

    Adding CSS:


    I realize this was implemented into customizer options in newer GP versions, but I am getting a baffling result.

    I have set my background color in Primary nav to Grey, and placed my primary nav in the slideout menu. (slideout visible mobile only)
    When I view it in customizer, it looks correct! But when I preview in chrome Dev tools as mobile (or actually on my phone) it is not grey at all, but appears to inherit the background color of the page, and the text color of the page, seeming to just float over it…

    I would assume I should be able to design a slideout menu to be inverse from the page, correct?
    normal page: white with dark text
    slideout: dark with white text
    is the goal.

    any ideas why this might be happening?
    Thank you!

    you can see the site:
    see here
    (note: you will need to slide down the page a little bit to access the menu button b/c there is a BB hook getting in the way of the menu.. havent adjusted this yet.)

    Customer Support

    Not quite sure what you mean? You can’t actually set the slideout navigation colors in customizer yet.

    Did you try the CSS above?


    The CSS works well to change the background color. how do we change the text color?


    Customer Support

    Like this:

    .main-navigation.slideout-navigation .main-nav ul li a {
        color: #000000
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.