Reduce left margin on mobile burger menu?

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%}}

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%}}

 

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

My testing result

Thank you - it worked although I had to adjust it and use 'left' instead of 'right'. With 'right' it moved all the text closer to the right hand side of the screen rather than left towards the middle of the page.