[Support request] Unable to merge background image to menu and header

Home Forums Support Unable to merge background image to menu and header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1491870
    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

    #1491907
    David
    Staff
    Customer Support

    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.

    #1491950
    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 ?

    #1492158
    David
    Staff
    Customer Support

    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.

    #1492197
    Amit

    Done, I have removed all CSS from addtional css.

    #1492209
    David
    Staff
    Customer Support

    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.

    #1492225
    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.

    #1492235
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.