Set the Monochrome Pro fixed header to a relative position

[ahoy.hoyParticipant]

I wish to set the Monochrome Pro fixed header to a relative position.

.site-header {
background-color: rgba(0, 0, 0, 0);
}
.front-page .site-inner {
margin-top: 0;
}

Gives the header transparency and raises the background image. So far so good. But add in:

.site-header {
position: relative;
}

And the background image drops by 100px or so. I figured:

.front-page .site-inner,
site-inner {
margin-top: 0px !important;
}

Would solve the problem. Sadly it does not. Any ideas would be gratefully received?

Thank you all in advance for your time and trouble.

Kind regards
Jason

http://localhost

[Victor FontModerator]

Think of fixed vs. relative as 3D vs. 2D. A fixed position header floats above the other elements on the page. Changing the header from fixed to relative places it inline on the same plane as the other elements on the page. That's why the image dropped. The relative header had to make room for itself and pushed the image down. By using margin 0 on the image, you tell it to abut itself to the area immediately above, the relative header, not the page. If you want the image to be under the relative header, you have to give the image a negative margin to move it up past the edge of the header. You may also need to apply a higher z-index to the header than the image to simulate the same appearance as the fixed header.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[ahoy.hoyParticipant]

Hey Victor,

Thank you for your swift reply and such an insightful answer. I never considered the relationship of fixed vs. relative as 3D vs. 2D.

With this now in mind, inspecting the elements on https://my.studiopress.com/themes/monochrome/#demo-full, I have combed the z-indexes.

And I reckon the problem is style.css:695

.site-inner {
margin-top: 180px;
}

the margin-top: 180px being struck-through. And me not being able to identify the parent!

Could I trouble you further and ask why is should be?

[ahoy.hoyParticipant]

The missing piece of he puzzle is:

.front-page-1 {
margin-top: -100px;
}

The Monochrome Pro header is now positioned relative and transparent.

[Author]

Posts