Archived topic
Mobile Menu Centering
5 replies · Started by racheljohn on July 1, 2021
So I am trying to get the mobile menu to look like this site Here so on my dev site it needs to be centered and moved up so that its background is white like the top-bar and also not sure how to get the font to size better on mobile. I tried doing it from the typography settings but seem like its not actually changing it. Also tried this css which isn't working either
@media (max-width: 768px) {
.main-navigation {
text-align: center !important;
}
}
I would also love to know if there is a way to have the shopping cart not be a iframe but being this is a shopify cart didn't know if that's possible
Hi there,
You have this CSS that's messing with the alignment:
iframe#cart {
width: 50px;
height: 50px;
position: relative;
top: -8px;
margin-bottom: 0px;
margin-right: 55px;
margin-left: ;
}Remove the margin values and add this CSS:
div#primary-menu {
width: fit-content;
margin: 0 auto;
}okay that helped a lot! Only issue now is if the mobile device is landscape its still not centering for some reason.
You'll need extra media query for that.
Try the suggested media queries here depending on what you'll need. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
that's exactly what I was looking for thanks!
that’s exactly what I was looking for thanks!
Keep in mind: This is tricky to implement as there's always a new device to be released out there that won't adhere to this.
No problem. Glad to be of any help. :D
