[Resolved] Custom site header using blocks

[Taner]

Hello,

I’m trying to create a custom header using Generateblocks but can’t seem to work out how to do this.

I’ve checked out the elements section but couldn’t see an option to use block here.

I also tried creating blocks in the widgets top bar section by adding columns then adding content blocks but for some reason, all the columns are being squished together instead of using the full space of the top bar.

Please see the image of what I’m trying to create for my header.

I’m using the latest version of GeneratePress Pro

Any help would be appreciated.

TIA

[David]

Hi there,

can you share a link to your site so i can see what you have so far ?

[Taner]

Hi David,

Thank you for the reply, please find the link below:
http://demo.boltonsict.net/gp-pro-kb/

I created the Top bar from the widgets section and the logo was added in the elements section.

Thanks

[David]

OK – simplest method would be to NOT use the Themes Top Bar by removing the Widgets and then build the entire top bar using a Block Element ( Hook set to before_header ).

Before doing that you would need to confirm that the Search and Google language switch are something you can add in the block editor? Are they something you have as a block or shortcode ?

[Taner]

Hi David,

This is my first GeneratPress Pro site so please bare with me.

When I create a Hook element I still can’t see anywhere in the element to add my blocks?

Instead, I have tried creating a block element and set the element type as Site Header (hope this is the right way of doing it), I can now see the blocks I created in the element in the site header on the front end.
For some reason, the icon list appear extremely large, I’ve tried changing the layout and size in the icon list block but they don’t seem to affect the size on the front end.
http://demo.boltonsict.net/gp-pro-kb/

Really appreciate your help.

Thanks

[Ying]

Hi Taner,

Not sure which icon list we should be looking at, the icons in your custom site header looks normal. https://www.screencast.com/t/oOeVwLf16UyK

Let me know 🙂

[Taner]

Hi Ying,

Thanks for your reply.

I’m sorry I ended up useing inline style fontawsome icons when I wasn’t able to change the list icon block sizes.

Can I ask you how I can hide a element row on mobile and tablet device?

Thank you

[Ying]

Can I ask you how I can hide a element row on mobile and tablet device?

GP has these built classes, you can add hide-on-mobile or/and hide-on-desktop class to the element.

For how to add the additional CSS class: https://wordpress.com/support/adding-additional-css-classes-to-blocks/

[Author]

Posts