Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Member1701

Question

10 answers to this question

Recommended Posts

  • 0

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
  • 0

 

@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
  • 0

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
  • 0

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
  • 0

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
  • 0

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...