How to adjust fixed header so it dont block the content on the pages

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.

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;
}

@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;
}

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;
}}

@ErikaT
That seem to do the trick. Thank you very much!

All sorted now? 🙂

@ErikaT

Actually, I realize there is still an issue on tablet. Screenshot attached, Is there a way to fix this?

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;
}

@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.

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 🙂

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;
}