Jump to content

Button disappearing on safari?

Recommended Posts

Site URL: http://laurabustaffa.com

I've customised the appearance of items in my mobile menu. The aim was to have all items appear at the top of the screen rather than in the middle and the button after them rather than at the bottom of the screen.

Like this: 

image.png.ccdac352d374ef512b48452cc56f3fb1.png

But on iPhone safari the button disappears:

346598707_photo_2022-09-2910_30_38.thumb.jpeg.c06884f1d21b9382ae0f66bc13d1d248.jpeg

 

I've botched this code digging through past responses:

/*move nav items to the top on mobile*/
[data-folder] .header-menu-nav-folder-content {
    justify-content: flex-start;
}

/*move button up on mobile nav*/
header#header .header-menu-cta {
    position: relative;
    top: -600px;
}

 

Maybe -600px is too much? I guess a measure relative to the menu items rather than absolute might be better? but I'm not a developer... 🙂

 

Thanks!

Link to comment

Try changing second code to

header#header .header-menu-cta {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

You could add this to change the minimum height of the navigation folder and this will bring the button up to underneath the nav items, but also allow you to add more without adjusting in pixels.

.header-menu-nav-folder {
  min-height:5% important;
}

Hope this helps!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.