[Resolved] Align Hamburger Menu for Mobile

[Ighty]

In the mobile view I have the hamburger menu that’s in the center when on top of the page, while scrolling down it goes far right, and when open using slideout the words have no margins on the left side.

I’d like to:

– when on top page, the menu should be on the right side, with some margin (I guess 20px? even better if using a responsive measure)
– when scrolling down, the menu should be on the right side, with some margin same as the logo that is on the left side (I guess 20px? even better if using a responsive measure)
– when opening the menu, the menu words should be with some margin on the left side (slideout-menu?, I guess 10 or 20px should be good even better if using a responsive measure)

With the inspector I changed the CSS and the result is achievable using CSS, however there could be another way to set those margins and alignments using the theme features that I’m not aware of, if this is the case I’d like to know where and what to change.

Thanks

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

in Customizer > Layout > Header –> Enable Mobile Header and set the option there to be sticky. This will replace the normal header and all elements should be well aligned.
You can then remove that CSS.

Also remove any CSS you have applied to the slideout, if it needs improving i can provide some CSS

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

[Ighty]

Hi David,
I followed your instructions but the menu still has the problems:
– hamburger without margin on the right
– menu categories without margin on the left when menu is open

[David]

Go to Customizer > Layout > Primary Navigation and check what value you have in the Menu item width, increase this it should put back the missing space

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

[Ighty]

Thanks! Found the issue. There was a value of “0” instead of no value.

Thank you!

[David]

Glad to be of help

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

[Author]

Posts