0

I have a header that has to stay fixed but it overlaps my content behind the header. I already tried position: sticky but not really looking for that.

My header is dynamic, can't put a fixed height to it because the logo in the header has to resize with size of the browser. bottom:0; is not what i'm looking for.

Adding a percentage of margin to the top of the hero class doesn't work for me because the header needs to fit to the hero class without changing the space in between when resized.

The position of the hero class has to stay relative because the content inside of it requires it.

Is there a possibility without doing this through javascript?

This is my code:

header {
width: 90%;
height: auto;
background-color: #D9D9D9;
position: fixed;
top: 0;
z-index: 9999;
}

.hero {
background-image: url(../images/hebiasgrafiek.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 0px;
height: 20%;
position: relative;
border-bottom: 1px solid #FFF;
}
Gilles Coene
  • 43
  • 1
  • 1
  • 5

1 Answers1

-1

Kind of an odd trick, but you could duplicate your header code. Make one of them fixed. Then the other one which is just a static block level element will render underneath the fixed header and always push your content down the correct amount.

Though you said you can't use a fixed height, maybe you can. You just use a fixed height that is set to different heights at different breakpoints, and then you use positioning or margin to push the content down the same distance at the same breakpoints.

JasonB
  • 6,243
  • 2
  • 17
  • 27