Add blocks in the header

Hi Thierry,

I would recommend using Generateblocks as the block editor, then use its Grid block to create the strucutre.

Add logo into the left container, add the others to the right container.

The structure will be looking like this:
https://www.screencast.com/t/q9q4UGh3z1

Let me know if this helps :)

Thanks, ok but how i import the menu in the header ?

or it's just a button with link ?

I think I misunderstood your question, I thought you were trying to build a custom header. My bad :P

So if you just want to add 2 blocks to the default header, you can use generate_before_navigation and generate_after_navigation hook.

Then some custom CSS will be required to adjust the layout. If you can link us to the site, we can point you in the right direction.

Hi, yes thanks

Hi there,

I believe we may have to wrap block before, the menu, and block after so it can be properly styled with CSS.

To do this, you'll have to create 2 more Hook Elements containing these:

For the first hook element: Set the opening wrapper element, see this setting - https://share.getcloudapp.com/kpuDmq9p

For the Second hook element: set the closing tag. see this setting - https://share.getcloudapp.com/9ZudNkGx

Pay attention to the priority values. They're important.

That said, as for the adjustments to the block elements, edit your "block after" Block element and set it's priority to 5 so it renders before the second hook, effectively wrapping "block before", the menu and "block after".

You then add this CSS:

.header-content-right {
    flex: 1 1 auto;
}

This will be how it'll behave on a live site. https://share.getcloudapp.com/4gunxBxE

Great, it's ok. Thanks :)

No problem. :D