Archived topic
Reduce padding on mobile header
5 replies · Started by Tim on October 10, 2021
Hello,
For mobile view, how would I go on about reducing the whitespace/padding above and below the logo in the header?
See attached URL and image for explanation (the red marked area is what I would like to reduce by a few pixels).
Thanks
Hi there,
the height of your site navigation on mobile is defined by the height and the spacing of the elements it contains.
The one that is affecting the height most is the woo cart which has this CSS that is adding additional 13px top margin:
@media (max-width: 768px) {
.xoo-wsc-cart-trigger a {
font-size: 18px;
margin-top: 13px;
}
}If you want lest height then you will need to reduce that top margin.
I see. I removed it now and it made the height go down, but now the cart icon is not aligned horizontally with the logo and the hamburger icon.
How do I fix that if I can't have margin-top on it?
Try this CSS:
@media (max-width: 768px) {
.main-navigation .xoo-wsc-cart-trigger a {
display: flex;
}
.main-navigation .inside-navigation {
padding-top: 10px;
padding-bottom: 10px;
}
}Thank you Leo, that fixed the problem :)
No problem :)
