Archived topic
Increasing padding between menu and header only on mobile
5 replies · Started by Lina on October 26, 2022
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
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 ?
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.
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
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.
See here - i made these amends to your Block Element Menu Bar Button:
https://www.screencast.com/t/5ppf4xIK
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.
