Member1701 Posted March 10, 2021 Share Posted March 10, 2021 (edited) Site URL: https://www.nolanjonesdesign.com/ https://www.nolanjonesdesign.com/ Password: 1234 I've a fixed header to my site, but it's position is cutting off the content on the site. Is there a way to fix this? Also I would like to adjust the padding around my logo. Thanks in advance. Edited March 10, 2021 by Member1701 Link to comment
ErikaT Posted March 10, 2021 Share Posted March 10, 2021 Hi, seems to be on all your pages on desktop, until your logo shrinks for mobile. Try the below to move the body down on each page, below the header, altering the px number as you wish, 120 seems roughly right? @media screen and (min-width:768px) { body { padding-top: 120px } } And then I assume you mean the top padding of the logo on desktop, so that would be: .logo-image { padding-top: 20px;} Also noticed your mobile logo is quite small so you could increase it with: @media only screen and (max-width: 768px) .mobile-logo-image img { max-height: 75px; max-width: fit-content!important; } Link to comment
Member1701 Posted March 11, 2021 Author Share Posted March 11, 2021 @ErikaT Thanks for your help. I'm running into some issues. My content/ body is no longer being cut off, woot! But, now the header is no longer sticky. As there is a bit of excess padding underneath the header on the tablet. I'm also getting a "Syntax Error" in the custom CSS. Here is the code I am using: header#header { background: white; position: fixed; top: 0; left: 0; right: 0; z-index: 999; } @media screen and (min-width:768px) { body { padding-top: 120px } } .logo-image { padding-top: 20px;} @media only screen and (max-width: 768px) .mobile-logo-image img { max-height: 75px; max-width: fit-content!important; } Link to comment
ErikaT Posted March 11, 2021 Share Posted March 11, 2021 Ahh yes syntax code is because I missed the media brackets off the last bit of code 🙂 it should have been the below if you want to copy that: @media only screen and (max-width: 768px) { .mobile-logo-image img { max-height: 75px; max-width: fit-content!important; }} Link to comment
Member1701 Posted March 11, 2021 Author Share Posted March 11, 2021 (edited) @ErikaT That seem to do the trick. Thank you very much! Edited March 11, 2021 by Member1701 Link to comment
Member1701 Posted March 11, 2021 Author Share Posted March 11, 2021 @ErikaT Actually, I realize there is still an issue on tablet. Screenshot attached, Is there a way to fix this? Link to comment
ErikaT Posted March 11, 2021 Share Posted March 11, 2021 Try removing all the code and replacing with: #header { position:fixed; z-index: 1; background-color: white; width: 100%; padding-top: 10px; } @media only screen and (min-width: 641px) { .site-page { padding-top: 140px !important; } } .mobile-logo-image img { max-height: 75px; max-width: fit-content!important; } Link to comment
Member1701 Posted March 11, 2021 Author Share Posted March 11, 2021 (edited) @ErikaT Thank you so much for your help. The issue with the top padding is still there for tablet, it start to happen at the 768-764 breakpoint. It's so minor but just thought I would call it out. Edited March 11, 2021 by Member1701 Link to comment
ErikaT Posted March 12, 2021 Share Posted March 12, 2021 No problem, it's always the case, some final tweak. Took me ages to get my header right! In this case have you got the new code in now(?), if so just tweak this line to: @media only screen and (min-width: 768px) { If not drop me a PM, I could fix the code hands-on, but using chrome devtools with existing code in place is a right faff 🙂 Member1701 1 Link to comment
ErikaT Posted March 12, 2021 Share Posted March 12, 2021 Code works as below: #header { position:fixed; z-index: 1; background-color: white; width: 100%; padding-top: 1vh; } @media only screen and (min-width: 769px) { .site-page { padding-top: 15vh !important; } } .mobile-logo-image img { max-height: 13vh; max-width: fit-content!important; } tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment