[Resolved] Header widget question

[Henk]

Hello,

I added a header widget to my site to build a ‘icons/contact’ box just like in this example

In the widget I added custom HTML, but I am a bit confused how to get the same result a in my example.

I am reffering to the “CALL US” and “OPENING HOURS” block. How to get the icons on the left, and the text on the right?

I tried to copy the HTML from the example, but so far no luck.

[David]

Hi there,

are you using the Block Editor?

If so the simplest method be to use the GenerateBlocks plugin and the Block Element, which you can hook into the inside_header

https://docs.generatepress.com/article/block-element-overview/

[Henk]

Hi David,

Yes I am using GenerateBlocks too. But I am a newbie, so I have no Idea where to start to build such header. Now I have used to header widget to get some Icons into the header. When I am using GB, does this mean I have to recreate my header?

[David]

You won’t need to recreate the entire header.
You can simply create a new Block Element and then use the GenerateBlocks plugin to build the content your currently trying to display in the Header Widget.

You can then set it to display in the Hook: inside_header

[Henk]

Hi David,

Where can I find inside_header? Because it is not inside the dropdown menu next to the hook.

I can choose from:

Header
generate_before_header
generate_after_header
generate_before_header_content
generate_after_header_content
generate_before_logo
generate_after_logo
generate_header

But inside_header is not in that list…?

[Elvin]

Hi there,

You can try generate_before_header_content hook.

It’s a hook directly inside the <div class="inside-header"> element.

[Henk]

Hi Elvin,

My current header preset is Navigation After. When I select the hook generate_before_header_content my block content ends up directly after the logo. But I want it to be on the right, just like in this example.

Is it better for me to create the entire header (including logo) with GB?

And what hook should I choose when I decide to create the header myself?

[David]

Oops sorry about the wrong hook – must have had a funny moment.
Can you share a link to the site where we can see your Block Element in place ?

[Henk]

No problem David!

I can’t share a link, because the site is on my local host. But I decided to recreate the header myself. Every hook I try does not give me the result that I want.

Do I have to choose the generate_header hook if I want to design the entire header myself?

[David]

Ok – yep the generate_header hook will replace the themes site header.

[Henk]

Thanks!

I run into a problem. I am still trying to recreate this header, but when I add my SVG icons, they are scaling smaller when I change the screen size. The same SVG icon in my body is staying the right size. How is that possible?

And, is it possible to vertical align my logo in the DIV? now it’s on the top, but I want it in the middle. I can only see the option to horizontally center.

[David]

Its really quite impossible for me to advise without actually seeing the issue.
Are you able to open a tunnel to your local site or temporarily move it to a staging server?

[Henk]

Hi David,

I think recreating this header is too difficult for me. GB is hard to understand for a newbie like me.

[Elvin]

As David mentioned, its quite difficult to advise or make any suggestion to fit without actually seeing what’s on your site.

You can try learning GenerateBlocks by watching the videos here: https://generateblocks.com/ – or by reading the documentation.

[Henk]

Thanks Elvin,

I understand it is difficult to give suggestions if I can’t show you anything. But there is really nothing to show at this moment. Once I have created something, I will open a tunnel to my local site. But the problem is, I don’t know where to start.

What I have now is a full width container with a 2 column grid in it. In the left grid I have my logo, and in the right grid I need to create a ‘Info Box’ (opening hours/phone number/address). Here is a better example of the header I want to create.

In the right column I have created a 6 column grid. But when I add content (Icons and text) inside of the grid containers, the content is breaking out of the container. How do I make the containers ‘flexible’? So that it fits the content that is inside of it? Now they are a fixed % But is want them to be flexible. Or is that not possible?

Can you make a suggestion based on my example? So I can start building and showing what I have created? Now I have nothing to show just yet 🙂

[Author]

Posts