Header Logo Which Overlaps Header Into Content

[whitemedia]

Hi,

I have a website which needs the logo to overlap the header into the content, like in the screenshot below. The header I am trying to create is constructed of a Bar > Container > Grid > Cells. The background color is at Section level.

I am well versed with CSS Grid, but cannot get the logo to overlap the header section!

Thanks,
Christopher

[ruenel]

Hey Christopher,

Thanks for writing in!

You overlap the Logo image by doing the following:
1.) In your Container, which contains the Logo image make sure that it only contains the image. If you have the navigation elements, you will need to separate them like this:

2.) In the Container’s Flexbox settings, make sure that it is aligned to “Start” both horizontally and vertically

3.) If your Logo image height is lesser than the height of the Bar element, switch the Flexbox vertical alignment to “End”

4.) And then use a negative bottom margin in your Image element.

If the above steps are not helping, please provide us your WP details so we can check your custom header. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[whitemedia]

Thanks for the help @ruenel. Worked perfectly.

[tristup]

Hi Christopher,

Glad that we are able to help you.

Thanks