make responsive padding at top of gallery pages - camino

Hi there!

Website and one of affected pages is: https://www.somethingcoolcreative.com/promo-photos

I made my header sticky, so I needed to add padding to the page in order to push the top images down so they weren't being partly covered up by the header. However, I am not sure how to make the padding responsive. Pixels are not responsive, and I tried vh and using a % but in all cases, the padding above the first images changes in relation to the header, so sometimes it is just a few pixels and sometimes it is like 3x as thick as the rest of the white padding around each image.

Here are a couple things I have going on on a couple of different pages:

/*padding at top of aerials gallery*/

body#collection-5de70d2f89bdad6667541ccb .content-outer-wrapper {
    padding-top: 139px;
}

/*padding at top of press promos gallery*/

body#collection-5de3343ac573c502d7e83406 .content-outer-wrapper {
    padding-top: 20vh;
}

@RaeRae Use this code to make header sticky, and you don't need to care with the above problem.

header#siteHeader {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

(add to Home > Design > Custom CSS)

unfortunately that code does not work for making the header sticky as it still slides up about halfway when scrolling.

Here's all the code I am using to get the header to be sticky and full width. If any elements are missing it doesn't behave quite how I want it to:

/*make header sticky*/

#siteHeader {
  opacity: 1 !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
  -webkit-transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
  -moz-transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
  -ms-transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
  -o-transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
  transition: all 650ms 0ms ease, opacity 300ms 50ms ease;
}

.site-header.show {  
  background: #00758F;  
  margin: 0px;  
  padding: 0px 20px 0px 0px;} 

/*this code to make sticky header full width*/
.hide-header {
    opacity: 1 !important;
    background: #00758F;
  
  padding-top: 10px
    margin: 0;
    padding-left: 50px;
    padding-right: 50px;
}
 

1 minute ago, RaeRae said:

}
 

Try again with

header#siteHeader {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

If it still doesn't work, please keep the code and I will check.

it still doesnt work. I left it up so you can see what it does.

1 minute ago, RaeRae said:

it still doesnt work. I left it up so you can see what it does.

OKay. Remove the code I sent and use this

header#siteHeader {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform: none;
}

now it is sticky but on the portfolio pages it has a big white space above the header https://www.somethingcoolcreative.com/restaurant-food-photography

ah wait! I just remembered I had added that padding - removing it now!

@tuanphan  okay, so this is working great on the gallery pages now, but on the other pages there is a large white space between the header and the body. Any ideas?

https://www.somethingcoolcreative.com/photography-services

6 minutes ago, RaeRae said:

@tuanphan  okay, so this is working great on the gallery pages now, but on the other pages there is a large white space between the header and the body. Any ideas?

https://www.somethingcoolcreative.com/photography-services

I see it had top padding 121px. Did you create it or 😎

It seems that many pages have a 121px top padding. Try checking SS settings
If you can't find it, I'll send the code to solved

@tuanphan I just searched through my custom CSS and did not see 121 anywhere! I also got rid of all extraneous code from previous solutions. Then I checked in the site styles but did not see any padding set to 121, or really any padding adjustable on the top of the body or bottom of header.

2 minutes ago, RaeRae said:

@tuanphan I just searched through my custom CSS and did not see 121 anywhere! I also got rid of all extraneous code from previous solutions. Then I checked in the site styles but did not see any padding set to 121, or really any padding adjustable on the top of the body or bottom of header.

Which template do you use?

camino