Archived topic
Header Padding Issue
5 replies · Started by Austin on May 4, 2021
Is it possible to adjust the left and right padding in the desktop header without affecting the mobile look? I am using "Use Navigation as Header" and when I try to add padding to the left side of the logo, it moves the mobile logo as well, but I would like the mobile padding to stay unchanged.
I am currently using this CSS:
.main-navigation .navigation-branding img {
padding-top: 0px;
padding-left: 20px;
}
Website Link: golfhomes.servebolt.us
Hi there,
It's definitely possible. Use @media rule so it only applies to specified viewports.
Example: Applying the CSS on tablets and desktops.
@media(min-width:769px) {
.main-navigation .navigation-branding img {
padding-top: 0px;
padding-left: 20px;
}
}Hey Elvin,
Thanks that worked for the issue. However it did make my mobile logo slightly smaller and dropped it down from connecting with the top of the mobile screen which is what I was aiming for with the 0px padding top. Not to big of an issue, just seeing if that can be edited on mobile now?
It was originally inheriting the logo size and padding details from desktop which looked good, just had the left padding issue.
You can set something else for mobile by writing it this way.
@media(min-width:769px) { //for tablets and desktops
.main-navigation .navigation-branding img {
padding-top: 0px;
padding-left: 20px;
}
}
@media(max-width:768px) { //for mobile
.main-navigation .navigation-branding img {
padding-top: 0px;
padding-left: 20px;
}
}You then change the value for the CSS contents of @media(max-width:768px) for mobile.
Awesome, that works. Thanks Elvin.
No problem. :D
