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

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

Home Forums Support Increasing padding between menu and header only on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2388217
    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

    #2388318
    David
    Staff
    Customer Support

    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 ?

    #2388705
    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.

    #2388871
    Fernando
    Customer Support

    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

    #2389485
    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.

    #2389631
    David
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.