[Resolved] Changing background color & menu width in Mobile

[Tom]

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

[David]

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;
    }

}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

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

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Tom]

Got it, thanks for the update!

[Tom]

No problem!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts