[Resolved] header widget or shortcode outside contained header

[Jasper]

I have a contained header, but i would like to place the header widget outside the contained area on the rightside of the header. Is that possible?

[Tom]

Any examples of what you’re wanting to do?

[Jasper]

Here is an image of what i want to create

[Tom]

If you use the header widget, you could try something like this:

@media (min-width: 769px) {
    .header-widget {
        position: absolute;
        left: calc(100% + 20px);
    }
}

[Jasper]

thanks that works
I’m trying to finetune it a little and i wonder if it is possible to calculate a position with reference to the right side of the screen? Or calculate screenwidth-containerwidth. Divide it by 2 and use that to center the widget in the middle of the space between end of container and rightside of the screen?

[Tom]

You would have to use javascript for that I’m afraid. I also don’t know how well that would perform on really large screens or smaller screens.

I think you’re better off keeping it relative to the site header and then placing it outside the area using the code above.

[Jasper]

ok, I’ll keep it that way then, i can always add some more @media queries

[Tom]

That would definitely be the best way to do it 🙂

[Author]

Posts