Site logo

Archived topic

Integrate main menu into Page Header

15 replies · Started by Dani on January 2, 2016

Viewing posts 1–15 of 16

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!

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 :)

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 !

In theory it should work :)

Ok Thom, I hope!
Thanks a lot

No problem :)

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

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

Try this:

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

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.

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

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

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

Try this:

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

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.

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;
}

Great, thanks!

This archived topic is closed to new replies.