Merged hero/site header/navigation formatting

[Joseph]

So, lot of questions.

So I have on the homepage, a merged with content site header. There is also a sticky nav. And a mobile menu.

On the homepage:

How do I add padding to that logo? It is SVG if that makes a difference.

On the sticky nav:

Same thing, how do I get some padding on top of the logo so it’s not riding the top. But also, my navigation button in the navigation with my phone number, there is padding above it, but not below it. And I’d like it to be horizontally centered with the other menu items.

Finally, mobile:

How do I get the hamburger menu closer to the logo, and centered.

[Leo]

Hi there,

– I would recommend trying this option:
https://docs.generatepress.com/article/navigation-as-a-header/

Should work better for the layout you are trying to achieve.

– Can you disable the mobile header option for now?

Let me know 🙂

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

[Joseph]

Ok, I just did that. looks a little better. Still want a little top margin on the logo on the sticky nav. And mobile burger menu is still on the left, and maybe a little too big of a gap between mobile logo and burger menu.

[Leo]

Can you try to re-crop your logo image so it has even top and bottom padding?
https://www.screencast.com/t/KRWK3sXI

Let me know 🙂

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

[Joseph]

Perfect! Damn trying to learn SVG it’s completely different than Photoshop for sure.

Lastly, mobile nav. Get hamburger menu to the center on mobile only, with less padding above it? When I set the options in customizer to center, it works to bring the hamburger to the middle, but then on regular viewing the menu items are also centered.

Also, how do I apply these customizer settings for every page on the website? Or do I have to set them individually?

[Leo]

Do you want the menu toggle to be centered and below logo on mobile?

Not quite possible to center it as you have a very wide logo that will likely takes more than half the space on mobile.

The customizer options are global options so should apply to the entire site.

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

[Joseph]

Yes. I think I’m just going to ditch the svg logo then and go to regular png logos for now. Too much trouble.

[Leo]

Sounds good 🙂

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

[Author]

Posts