Unfix Header Scroll in Infinity Pro

[di]

Under .site-header I commented out position:fixed in order to stop the header bar from moving with the scroll. This works however it then takes away from the semi-transparent header bar I have for the Front Page (style-front.css) where I have the .front-page .site-header set at background-color: rgba (116,0,0,0.5).

Any suggestions?

https://www.chrisquilts.net

[Victor Font]

The transparency is working fine. The problem you are experiencing is because of removing position: fixed.

When you removed position: fixed, the default position: static; replaces it regardless of whether you specified it or not. Static positioning works similarly to relative positioning. Everything that was underneath the header before you removed fixed positioning has been pushed down into its relative position. There's nothing under the header now to show through the transparency except white space.

To fix this, change your CSS to this:

.front-page .site-header {
    background-color: rgba(116,0,0,0.5) !important;
    border-bottom: 1px solid transparent;
    max-height: 500px;
    position: relative;
}

.front-page .site-inner {
    top: -100px;
    max-width: 100%;
    padding-top: 0;
    position: relative;
}

---

Regards,

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

[di]

Thanks! That did the trick!

[Author]

Posts