[Support request] Slide out navigation settings or CSS

[Johannes]

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

[Leo]

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: https://docs.generatepress.com/article/adding-css/

[Vee]

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.)

[Leo]

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

Did you try the CSS above?

[Dinesh]

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

Regards
D

[Leo]

Like this:

.main-navigation.slideout-navigation .main-nav ul li a {
    color: #000000
}

[Author]

Posts