Site-inner under site-header, Monochrome Pro

[di]

I'd like to run the top image on my home page (site-inner?) right up to the top under the grey menu bar (site-header). The menu bar will be slightly transparent and the image should show through. What CSS can I adjust to make this happen?

https://adunate.com/test/

[askdesign]

Add the opacity property to your .site-header class. This will cause the background color to become lighter, so you'll need to adjust that too:

ORIGINAL CODE

.site-header {
    background-color: #333;
    border-bottom: 1px solid transparent;
    min-height: 80px;
    padding: 20px 40px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
}

MODIFIED CODE

.site-header {
    background-color: #000;
    border-bottom: 1px solid transparent;
    min-height: 80px;
    padding: 20px 40px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
    opacity: .75;
}

---

Anne S. Katzeff
Designer | Artist | Teacher

[Author]

Posts