Archived topic
Changing background color & menu width in Mobile
5 replies · Started by Tom on March 6, 2020
Hello, I am having trouble doing two things using the Mobile Header feature:
i) Change the width of the drop-down menu. I have tried toggling "Menu Item Width" under Layout > Primary Navigation but this does not seem to affect it.
ii) Change the color of the drop-down menu (different from the mobile header itself). I have not found an option to do this under Colors (only able to change the header color, it seems)
Attached screenshots:
https://www.staging2.thedermdetective.com/wp-content/uploads/2020/03/GeneratePress-Support-1.jpg
Hi there,
would the Off Canvas panel for your mobile menu be a better option?
https://docs.generatepress.com/article/off-canvas-panel-overview/
in the Slide out mode it doesn't occupy the full width of the screen and it has its own color colors.
If not let me know what Width changes you require for i) and you can use this CSS for ii)
@media (max-width: 768px) {
.main-navigation,
.main-navigation ul ul {
background: #222222;
}
.main-navigation .main-nav ul li a,
.menu-toggle {
color: #ffffff;
}
}Hi David,
Thanks for the suggestion. I tried the Off Canvas panel using Mobile Only and I like this better than my previous dropdown menu.
One quick follow-up: is there a way to adjust the menu width for this Off Canvas panel (I looked through the options but didn't see any) or does that require custom CSS? If the latter, I'll probably just skip it for simplicity as it looks decent already.
Thanks,
Tom
Hi there,
That requires CSS, for now.
You can find it here: https://generatepress.com/forums/topic/off-canvas-width/#post-920928
I think it's time we add an option for it.
Got it, thanks for the update!
No problem!
