[Resolved] align header-widget text to the bottom of the header, overlap background image

[sparkle]

i would like to align my header-widget text to the bottom of the header, and overlap background image across the navigation bar. i’ve tried css options including z-index and flex-end, but nothing seems to be working for me.

hope you are all well!

[David]

Hi there,

do you have a mockup image of what you’re trying to achieve?

[sparkle]

i was hoping for something like this https://imgur.com/a/MqVAPtJ

[David]

Try adding this CSS:

@media (min-width: 769px) {
    .site-header {
        margin-bottom: -100px;
    }
    
    .inside-header {
        display: flex;
    }
    
    .header-widget {
        order: 10;
        margin-left: auto;
        align-self: flex-end;
    }
}

You will need to increase the Headers Top and Bottom to around 100px each for the overlap to work.

[sparkle]

YES! thank you so much! that looks awesome! thank you! be well!

[David]

Glad to hear that and glad to be of help !

[Author]

Posts