Jump to content

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

Recommended Posts

  • Member1701 changed the title to How to adjust fixed header so it dont block the content on the pages
  • Replies 10
  • Views 1.1k
  • Created
  • Last Reply

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

 

@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

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

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

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 🙂

Link to comment

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.