Header covering content

The problem is that the position of your header is fixed. The code is in two locations:

@media only screen and (min-width: 800px)
.single-ja-event header.header {
  position: fixed;
  width: 100%;
  z-index: 90;
  top: 0;
}

and

‘@media only screen and (min-width: 801px)
header.header {
position: fixed;
width: 100%;
z-index: 21;
}`

You need to change these instances to “position: relative” to make it behave like the home screen. The reason that it’s not a problem on the home screen is because there is code specifically referencing the home screen header to make its position relative already.

Thanks It worked like a charm. However, now there is a little gap between the header and the subpage content. Any ideas?

Are you talking about the white space or the red space?

The white space is where the header should be, but it’s position is moved 123 px.

@media only screen and (min-width: 800px)
.single-ja-event #menu_top_event {
  width: 100%;
  background: transparent url('../images/top_menu_search_event.png') repeat-x top left;
  height: 67px;
  margin-top: 0;
  position: relative;
  top: 123px; *********
  z-index: 89;

The red space is the padding on the #top-event

@media only screen and (min-width: 800px)
.single-ja-event #top_event {
  padding-top: 190px;

Perfect! Thanks