[Resolved] Integrate main menu into Page Header

[Dani]

Hi Tom,

it is possible to integrate menu and logo inside the Page Header?

I want to say with the same background (image) cover all: Logo, main menú and Page Header (add-on) content.
Thanks!

[Tom]

Hi there,

This will be an option in Page Header very soon.

Which page are you trying to do this on? I can help you with some code for now 🙂

[Dani]

Hi,

I will build the page this next week, I notice you !

And, if I want to put a Revolution Slider shortcode (instead of an simple image) inside the Page Header, do you think can be integrated too with logo and menu?

Thanks Thom !

[Tom]

In theory it should work 🙂

[Dani]

Ok Thom, I hope!
Thanks a lot

[Tom]

No problem 🙂

[Jasper]

Same question so i hope you don’t mind using this thread,

I use a crelly slider shortcode. The shortcode in the pageheader content does not make it full width.
I used hooks to place it in ‘after header’ hook, then it is full width.
But adding
.home .site-header {
position: absolute;
width: 100%;
}

to custom css as i read somewhere else will hide the menu behind the slider. You can see it here: http://optiek.sierink-wp.nl

[Tom]

Looks like the slider you’re using has a higher z-index.

Try this:

.home .site-header {
    position: absolute;
    width: 100%;
    z-index: 9999;
}

[Jasper]

Thanks, but with the z-index i do see the menu again but it is not inside the slider. So basically the layout is the same whether i use this custom css or not.

[Tom]

Where did you add the CSS? I’m not seeing it in your code.

[Jasper]

ah sorry Tom, removed it since it did not seem to work.

It is in place again. I would like the menu to be in the slider and transparent. When the menu becomes sticky it must show the background color. Is that possible?

Link to the site: http://optiek.sierink-wp.nl and i would like to achieve the same as on this page: http://www.vanwarmerdam.nl/

Regards

[Tom]

Ah, you’re using the menu, not the header.

Try this:

.home .main-navigation:not(.navigation-clone) {
    position: absolute;
    width: 100%;
    background-color: transparent;
}

• This reply was modified 10 years, 2 months ago by Tom.

[Jasper]

Great, i think i start understanding this header and menu position.

But know i seem to have lost the sticky menu. And how would i make the menu transparent? But not the sticky menu.

[Tom]

I’ve adjusted the CSS above to work with the sticky navigation.

You’ll have to use CSS to adjust the transparency:

.home .main-navigation:not(.navigation-clone) .main-nav li a {
    background: transparent;
}

[Jasper]

Great, thanks!

[Author]

Posts