It's funny how such a silly little detail can cause so much frustration.
There's no padding, no margin, no nothing creating the gap between the nav links and the button.
So, excuse my french but, wtf?
Well, that's exactly what we'll be looking into in today's tutorial!
You'll be learning how you can bring the button (or social icons) closer to the menu links on mobile with just a few lines of CSS!
01 | CHAPTERS
00:00 - Intro
01:21 - Looking into what's pushing the CTAs to the bottom of the mobile menu
03:21 - Targeting the corresponding container to remove the extra space between links and button
04:03 - Center-aligning links and button inside the mobile menu in 7.1
02 | BLOG POST + RESOURCES
Find related tutorials, notes, and any code mentioned in this video:
https://beatrizcaraballo.com/blog/but...
03 | WORK WITH ME
Need help with a Squarespace client project?
From brainstorming the best approach to hands-on implementation, I help designers navigate tricky builds and move forward with confidence:
https://beatrizcaraballo.com/services
04 | THE SOURCE NOTES
Get weekly customization tips and troubleshooting insights based on real Squarespace project challenges:
https://beatrizcaraballo.com/notes
05 | SUPPORT + INQUIRIES
Have a project challenge you’d like help with?
I prioritize client inquiries, but I also use questions and challenges I receive to inspire future tutorials. Reach out here:
https://beatrizcaraballo.com/contact
06 | NOTE
The code shown in this video is provided as-is and may need adjustments depending on your specific project and Squarespace settings.
07 | KEYWORDS
mobile menu button squarespace, menu button spacing mobile squarespace, center mobile button menu squarespace, squarespace css tutorial, squarespace 7.1, custom css squarespace, squarespace web design, squarespace custom code, squarespace web development, squarespace design tutorial, squarespace site customization, squarespace code implementation, squarespace css tricks
-------------------------------------------------------------------
Music from #Uppbeat (free for Creators!):
https://uppbeat.io/t/jonny-boyle/tres...
License code: DT8VYCZ0NE1FUHWY