Adjusting the mobile nav bar when it is collapsed

[Montuya]

I have a few questions regarding the mobile nav bar when it is collapsed.

1. How do I adjust the alignment of the text? For example I wanted Home,blog about and contact to be the same alignment as search.

2. How do I adjust the max-width of the borders of each button and also make it mobile responsive? as it also bleeds out on mobile.

my website is : https://www.discoverweekends.com
see reference attached.

[rad]

Hi Rennyl,

Thanks for reaching out.

For the alignment, please change this CSS

@media (max-width: 481px){
  .x-nav-wrap.desktop{
    display:none
  }

  .x-nav-wrap.mobile{
    display:block
  }

  .x-nav-wrap.mobile.collapse{
    display:none
  }

  .x-nav-wrap.mobile.collapse.in{
    display:block
  }

  .x-btn-navbar {
    display: inline-block;
  }

  .x-navbar-inner {
    text-align: center;
  }

}

to this

@media (max-width: 767px){
  .x-nav-wrap.desktop{
    display:none
  }

  .x-nav-wrap.mobile{
    display:block
  }

  .x-nav-wrap.mobile.collapse{
    display:none
  }

  .x-nav-wrap.mobile.collapse.in{
    display:block
  }

  .x-btn-navbar {
    display: inline-block;
  }

  .x-navbar-inner {
    text-align: center;
  }

}

So it will be centered on most mobile devices.

And for width, are you just trying to add left and right spacing? In that case, please change this CSS

.x-navbar .x-container.max.width {
    max-width: 1024px;
    width: 100%;
    padding-left: 2em;
}

to this

.x-navbar .x-container.max.width {
    max-width: 1024px;
    width: 100%;
    padding-left: 2em;
padding-right: 2em;
}

Thanks!