Merge Top Bar and Main Menu with header slider

Hi there,

1. The Page Header add-on is probably your best bet here. You would add your slider in your page header content: https://docs.generatepress.com/article/merging-the-page-header-site-header/

2. If you upload it to your Media Library, you can share the File URL in here.

Hi,

that was my first try, but i'd like to have the slider fullwidth and the container narrower. With the Page Header add on the slider had the same width as the container.

http://www.energieeffizienz.tirol/wp-content/uploads/2017/07/Screendesign2.jpg

You should be able to re-create that exact look using the Page Header and then some CSS for the main content area.

If you can link me to your page using the page header add-on, I should be able to help :)

Great, thank you.

The Menu and Top bar work good on the slider (didn't know, that the top bar can also merge with the page header add on, that's perfect!) so only thing missing is the overlap of the main content area. am i still able to use sections then?

here the link:

http://www.energieeffizienz.tirol?bypass=optimal

if you need access to my dashboard i would send the per email.

You could do something like this:

#page {
    margin-top: -100px;
    z-index: 9999;
    position: relative;
}

However it would require your page header to be wider than the content (full width etc..) in order to see the effect.

unfortunatley it doesn't work out.

I played around with the settings (full width, contained,) but the only effect i reach is the opposite of what i wanted :). The content ist full width but i never achieve to have the slider full width.

So if i change the page header from contained to fullwidth nothing happens.
If i change the page builder content from contained to full width i see the difference but only the content, the slider stays contained.

Can you set your page header to be full width so I can see why the slider is staying contained?

i've already set the page header to full width. Because everything is translated into german on my dashboard, i made a screenshot to make sure we're talking about the same thing:

http://www.energieeffizienz.tirol/wp-content/uploads/2017/07/Screenshot-1.png

Try adding this CSS:

.generate-combined-content.grid-container {
    max-width: 100%;
}

that's it. Thank you very much!!!

Katharina

You're welcome :)

Hi, i'm sorry, but i recognized now, that this doesn't work on mobile devices. On small screens, the main content overlaps nearly the whole slider-image.

So i tryd to add:

@media (min-width: 64em)
#page {
margin-top: -100px;
z-index: 9999;
position: relative;
}

with the effect that the whole other css becomes neutralized.
Is this the wrong code, or did i put it on the wrong place?

thank you
Katharina

Try this:

@media (max-width:768px) {
    #page {
        margin-top: 0;
    }
}

Perfect. Thanks!