Docs

[Henk v]

Hello,

I have made a header with images (attachment) by using a negative top-margin for those images in the second content-band. This way they move up to the header area. This works fine for pages, but not for posts. Posts only show the actual header, not the second content-band with the images.

I would prefer the images to be in the actual header, in stead of the second content-band using negative top-margins. This would result in a similar header for Posts and Pages. (alternatively I could have the second content-band also show up on Post-pages, but I believe that would result in a template change which I’d rather not venture into)

Your help is greatly appreciated!
Thanks, Henk

[Henk v]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (min-width:979px){
.x-navbar {
    background-image: url(http://dhi.coolcowboys.nl/wp-content/uploads/2017/01/mensen.png);
    background-repeat: no-repeat;
    background-position: 83% 78%;
}
}

Hope that helps.

[Henk v]

Hi there,

Thanks for your response.
Because there were two images involved (the people-icons and the black banner behind the menu-item “Nieuwsbrief”) I have merged those two images into one and applied your code.

This seems to work, but I need the image to stay exactly behind the menu-item when resizing the window. Using % for image-position doesn’t seem to work.

Your help is much appreciated!

Thanks,
Henk

[Lely]

Hello Henk,

Unfortunately, that is the downside of this setup. The two image can’t be merged. The background is added on the navigation container. Unfortunately, the navigation itself will resize differently from the container. It should be applied differently.

[Henk v]

I think you misunderstood.
I merged the two images into one image myself and added it to the background as suggested, but then the image did not flow together with the navigation.

I replaced “.navbar” with “.masthead-inline .desktop .x-nav” and added some bottom padding for the image to fully display at the bottom.
It looks like this solved the problem.

Thanks for your help!

Cheers,
Henk

[Joao]

Good to hear it, let us know if you need further help.

Joao

[Author]

Posts