Jump to content

Code for 7.1 or fix the padding in mobile nav menu?

Recommended Posts

Site URL: https://www.printedandpink.ca/

I have been trying to find coding to adjust the padding on my mobile navigation menu. When it’s centred there is a ton of space above the menu below my logo. When it is aligned left or right it hugs the sides way too much and is still centred vertically for some reason. Any fixes? Thank you so much!

47C5A3E2-1B02-4A8F-99DF-DB860EBD35D0.jpeg

Link to comment
  • Replies 6
  • Views 912
  • Created
  • Last Reply
2 hours ago, sarahstrongarm said:

Site URL: https://www.printedandpink.ca/

I have been trying to find coding to adjust the padding on my mobile navigation menu. When it’s centred there is a ton of space above the menu below my logo. When it is aligned left or right it hugs the sides way too much and is still centred vertically for some reason. Any fixes? Thank you so much!

47C5A3E2-1B02-4A8F-99DF-DB860EBD35D0.jpeg

The menu is set vertically center, do you not like that config and need it closer to the logo?

Any way you can use this snippet try to reduce some padding on the top

.header--menu-open .header-menu {
    padding-top: 0 !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
4 hours ago, sarahstrongarm said:

@bangank36 thank you for your help! This didn’t seem to fix the issue...any other ideas?

I asked you about preference, so you need it move close to the header logo instead of vertical center right?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 minute ago, sarahstrongarm said:

@bangank36 Yes, I would like it closer to the header logo. I would like to be able to adjust the spacing from the top and the sides if I choose to align it left or right. Thank you 

.header-menu-nav-folder-content {
    position: relative;
    display: flex;
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: start;
    flex-direction: column;
    top: 10px; /* Update this value to your need */
}

image.thumb.png.8aaaa2baeab1a944cb4afeaadebe5aff.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.