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;}
}
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;}
}
Share this post
Link to post