Jump to content

Reduce left margin on mobile burger menu?

Recommended Posts

Site URL: https://www.rjparchitects..com

Hello,

I added a new item to my menu - 'testimonials' , and the word isn't fitting within my burger menu width on mobile device.

I would like to reduce the left hand margin shown in the screenshot so it fits? I would like to keep the right hand side the same so it stays aligned with the X (close burger) icon. So ideally the word testimonial just starts a little bit further to the left?

I've just reduced the text size for now so it doesn't look bad, but I'd like to change it back as its a bit small really.

 

The current CSS Code I am using in relation to the burger menu is:

/* MOBILE BURGER MENU */

/* Top aligned text in burger menu */

.header-menu-nav-folder-content {

  justify-content: unset;

}

 

/* Text size and alignment burger menu */

.header-menu-nav-item a {

  font-size: 20px;

}

 

/* Partial dropdown width and aligned to right hand side */

@media screen and (max-width:769px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible; width: 37.5%; margin-left: 62.5%}}

 

IMG_6009.jpg

Edited by creativesurfing
Link to comment
1 hour ago, creativesurfing said:

Site URL: https://www.rjparchitects.com

Hello,

I added a new item to my menu - 'testimonials' , and the word isn't fitting within my burger menu width on mobile device.

I would like to reduce the left hand margin shown in the screenshot so it fits? I would like to keep the right hand side the same so it stays aligned with the X (close burger) icon. So ideally the word testimonial just starts a little bit further to the left?

I've just reduced the text size for now so it doesn't look bad, but I'd like to change it back as its a bit small really.

 

The current CSS Code I am using in relation to the burger menu is:

/* MOBILE BURGER MENU */

/* Top aligned text in burger menu */

.header-menu-nav-folder-content {

  justify-content: unset;

}

 

/* Text size and alignment burger menu */

.header-menu-nav-item a {

  font-size: 20px;

}

 

/* Partial dropdown width and aligned to right hand side */

@media screen and (max-width:769px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible; width: 37.5%; margin-left: 62.5%}}

 

IMG_6009.jpg

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  .header-menu-nav-folder-content .header-menu-nav-item a {
    margin-right: 7px;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.png.d5b4497dc90a5574cd59610f9a7125aa.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.