Unable to merge background image to menu and header

[Amit]

Hi,

I have build a hero image with generateblock and i need to merge the background image to header/menu. How do i do that ?

Also I need to get the logo in center and split the menu.

Also , when i see the mobile view, i just need to see the collapse menu. But currently i see colapse menu and all the menu items also. Could you please help me with that ?

Best Regards
Amit

[David]

Hi there,

you need to create a separate Header Element.
DO NOT add anything to the hero content or change any settings on the content tab. Go straight to the Site Header tab and set this to Merge with Content and then you can change header/nav colors.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

Thanks for the update. SO i created the header element and did exactly how you stated. but the Navigation menu still does not merge with the GB image.

Also, how do I split the menu. Currently you can see, logo in center is overlapping the menu item. Do i need to reduce the number of item in menu or something ?

[David]

In the Header Element > Site Header tab, enable the Navigation colors and set them to transparent.

Can you remove any CSS you have added to create the split header – i will then take a look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

Done, I have removed all CSS from addtional css.

[David]

Try this CSS:

@media(min-width: 769px) {
    .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        text-align: center;
    }

    .main-nav {
        flex: 1;
    }

    .main-navigation li:nth-child(4) {
        margin-left: auto;
    }
}

Then you can remove the Menu Item Separator from your Menu.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

You are awesome. That worked like a charm :). One last thing, could you please help me with the merge part as well. I cant seem to figure that one.

[David]

Edit your Header Element – and then follow the steps in this article:

https://docs.generatepress.com/article/merging-header-navigation-content/#merging-our-header

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts