Mobile Nav

Hi,

I am making a mobile navigation for my website to be used on tablet and desktop too. However, the navigation links will not center no matter what I do. if I change them  they change on another thing. Here is my code. Please help 😞

.is-mobile-overlay-active .Mobile-overlay {
  @media screen and (min-width: 768px)
  {
    width:30%
}
  @media screen and (max-width: 768px) {
    width:50%
  }
  @media screen and (max-width: 640px) {
    width:80%
  }
}

@media only screen and (max-width: 768px) {
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item {
  text-align: center ;
  margin-left: 65px;
  padding-bottom: 50px} 
.Mobile-overlay-menu {
  width: 100%; z-index: 1}
}

  @media only screen and (max-width: 640px) {
.Mobile-overlay-nav-item, .Mobile-overlay-folder-item {
  text-align: center;
  margin-left: 45px !important;
    padding-top: 0px;
    padding-bottom: 30px} 
.Mobile-overlay-menu {
  width: 100%; z-index: 1;}
}

media only screen and (min-width: 768px)
  {.Mobile-overlay-nav-item, .Mobile-overlay-folder-item {
  text-align: center;
  margin-left: 230 !important;
    padding-top: 0px;
    padding-bottom: 30px} 
.Mobile-overlay-menu {
  width: 100%; z-index: 1;}
}

Can you share link to your site?

I am using this code to center my navigation, still searching for the solution to center vertically but I added margin which makes the nav show below the header/logo. Maybe this will solve at least part of your issue.

.Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center; margin-top: 30px !important;;
} 
.Mobile-overlay-menu {width: 100%; z-index: 1;}