[Resolved] Integrate main menu into Page Header

Home Forums Support [Resolved] Integrate main menu into Page Header

Home Forums Support Integrate main menu into Page Header

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #162962
    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!

    #163003
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #163043
    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 !

    #163094
    Tom
    Lead Developer
    Lead Developer

    In theory it should work 🙂

    #163214
    Dani

    Ok Thom, I hope!
    Thanks a lot

    #163303
    Tom
    Lead Developer
    Lead Developer

    No problem 🙂

    #167133
    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

    #167188
    Tom
    Lead Developer
    Lead Developer

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

    Try this:

    .home .site-header {
        position: absolute;
        width: 100%;
        z-index: 9999;
    }
    #167209
    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.

    #167251
    Tom
    Lead Developer
    Lead Developer

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

    #167306
    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

    #167390
    Tom
    Lead Developer
    Lead Developer

    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 8 years, 2 months ago by Tom.
    #167400
    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.

    #167470
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #167478
    Jasper

    Great, thanks!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.