[Support request] Increasing padding between menu and header only on mobile

[Lina]

Is this possible?

I posted my website below. You can see that on desktop, everything looks fine… but because I’ve increased the size of the top menu bar to accommodate a taller logo, the text in the header section now appears underneath the menu.

Is there an easy way to fix this without adding more padding? I don’t want a thick amount of blank space in my headers just to make it look good on mobile. I feel like I’m missing something obvious that can be done.

Thank you kindly

[David]

Hi there,

so the issue is the amount of space to accommodate the logo, button and hamburger.
Would you consider a smaller square mobile logo ? Or moving the CTA button elsewhere on mobile ?

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

[Lina]

Sure, I can consider all of these options. I’ve made a smaller square logo, but on mobile, it still doesn’t leave enough space for everything.

Could we change the amount of padding around the button, only on mobile? To reduce it a bit…
Alternatively, I could remove the button all-together, but I’m not sure how.

Orrrr… would it be possible to make an alternate button just for mobile, that is perhaps only one word? Then it could fit with the hamburger and the smaller logo.

[Fernando]

Hi Lina,

For instance, is this something you’re looking for?: https://share.getcloudapp.com/Kou16yL4

Or this?: https://share.getcloudapp.com/E0uZv8P9

Can you share admin login credentials, and I’ll check how this button is added, and correspondingly provide an appropriate approach to the issue?

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Lina]

Hi Fernando,

Yes, that option would be great. It really looks like if the padding could be modified only on mobile, it might fix the issue?

The button is a Block-hook element.
I’ve sent login details below.

[David]

See here – i made these amends to your Block Element Menu Bar Button:

To cover:

1. Edited the Buttons (Wrapper block) and removed the left and right margin.
2. Added the left and right margin to the Button block.
2.1 With that button selected i added the hide-on-mobile class*
3. Duplicated the button for the mobile version.
3.1 reduced its margings
3.2 gave it the hide-on-desktop hide-on-tablet classes

You can edit the duplicate button to make it fit your mobile device.

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

[Author]

Posts