Header widget question

You can use a single Headline Block for each of those column content.

1. Add the Headline and type your first line of text. eg. Monday - Friday 08:00-19:00
2. Hit enter to create a new line and your second text line eg. Saturday and Sunday - CLOSED
3. Highlight the second line of text - and from the Toolbar drop down arrow select Highlight. This will add a <mark> tag to that text ... we can use that for styling.
4. Then go to settings > Icons and add an Icon - and set its size etc.
5. Finally go to the settings Advanced and in Additional CSS Classes add: stacked-headline

Then view it on the front end and in customizer add this CSS to style the second line of text:

.stacked-headline mark {
    font-size: 0.75em;
    color: #888;
}

Thanks David,

I know I can use a single Headline Block for each of those column content. But when I do so, the text breaks. I want:

Monday - Friday 08:00-19:00
Saturday and Sunday - CLOSED

on one singele line.

But mine looks like:

Monday - Friday
08:00-19:00
Saturday and
Sunday - CLOSED

How to get this in one line? My containers are too small?

And where to find icons? I can only see social icons in the list, but I don't need those.

Hi Henk,

You could use inline-width for Headline block which is a setting from Spacing.
https://docs.generateblocks.com/article/headline-overview/#spacing

Let me know :)

Hi Ying,

The result is still the same. It looks like this:

Monday – Friday
08:00-19:00
Saturday and
Sunday – CLOSED

But I want:

Monday – Friday 08:00-19:00
Saturday and Sunday – CLOSED

For testing purposes, I have a full width container, and the inner container is set to contained. Inside of that container I have a six column grid. Inside of those 6 columns I have a Icon on the left, and some text in the next container and so on...

My problem is, there is a lot of room inside of the incon containers, they take too much space, the icons are just 40 px wide. Another problem is, that the text containers are too small. How can I make sure the content matches the containers width? instead of a certain % ?

Could you link us to the site in question, you could use the private info field.

It's difficult to imagine your issue here without seeing the code.

Let me know :)

Hi,

What is the best way to open a tunnel to my local site?
I tried ngrok & localhost.run, but both are redirecting me back to my localhost. What I am doing wrong?

Unfortunately that isn't something we can help in the support forum here as it's not theme-related.

Did a quick Google search and maybe something like this would help?
https://chenhuijing.com/blog/tunnelling-services-for-exposing-localhost-to-the-web/

You might need to do some more research based on the localhost you are using.

Hello,

Sorry for my late reply. I needed some time to set up my tunneling service. In the private information field I have provided the link.

To resume my questions:

1) How do I fit the icons inside their DIV? Now the Icon DIV's are way too big.

2) How do I get my text on one row? Instead of:
This is my first
line of text
This is my second
line of text

But I want:
This is my first line of text
This is my second line of text

3) How do I get my logo, icons and text vertically aligned? I only see a horizontal alignment option.

4) How to create a horizontal divider like between the header items like in this example?

Sorry for all of these questions, but I did not want to create a seperate topic for each one of them, since they are all related to the header section of my site.

My tunnel session is going to expire soon. Can you take a look at my website please? Otherwise I have to start a new session with a new website URL.

Thank you!

Hi there,

Sorry we weren't able to get to this in time - seems the link has expired. Can you open a new one?

In the private information field I have sent a new link.

The recent link provided has expired.

Any chance you can copy the site to a staging site for us to check? So we don't have to worry about expirations.

I have copied my website to a staging site. I have provided the link in the private information field.

Hi Henk,

1) You are using the same width 16.6% for every container under grid, try to reduce the width of the containers which contains the icons.

2) Once you reduce the width of icon container, you can increase the width of text container. Might need to do some math :) Additionally you might need to shrink the font size of the text if there is still not enough space.

3) Choose Center as vertical alignment for each Grid structure. https://www.screencast.com/t/Bs7Wk5jD

4) Add border bottom for the very outside container.

Let me know how it works :)

Hi Ying,

It did not work they way I wanted too, so instead I used the header widget with custom HTML. Flexbox and span tags with soms CSS did the trick for me. I don't know how it looks on your end, but all looks fine here.

Thanks again for the help!