Tailwind Header Block

Blocks
1

Hey there,

I’m trying to make a Off-canvas menu with Tailwind ”Full width” header block but I can’t make it work. Is there anyone here who can guide me to solve this?

Thanks in advance.

2

Hi @kalsson1,
I might be able to help, but you will need to give me a little more info about what your code looks like so far and what you are trying.
Cheers,
Bob

3

Hey @RobM,

I have only taking a Tailwind block. I want to hide the horizontal menu on all screen sizes and just show the hamburger icon “span” on all screen sizes.

Skärmavbild 2022-02-05 kl. 06.29.33
Skärmavbild 2022-02-05 kl. 06.29.331920×949 87.4 KB

4

Hi @kalsson1,
Okay, let’s break the problem down.
First, we need to figure out what is making the hamburger disappear at large widths. Highlighting the button element in the Tree panel and then looking in the Property panel we can see it has a class of lg:hidden. Removing that gives us our button all the time.

Second, we need to hide the menu off-screen until the button is clicked. So how is this accomplished now? Two things are going on. Right now, at small and medium sizes, the div below the button with all the menu items is hidden. At large and up it has a display set to flex with the lg:flex class. Removing all of the lg: prefixed classes will re-hide it.

Side Note: When bringing the menu in from the Tailwind CSS Blocks you don’t always get Interactions added. I think in this case you need to add it to get the button to work. Go to the Interactions panel and activate it for the page.

Okay, Now the only other thing is to reset the selector on the page in the button interaction.

image
image884×310 20.7 KB

You have to click on the target of the top animation that removes the hidden class. It should point at the main div below the button.

That should be it. All that is left is for you to reset the styling of the menu how you want it to look on each size screen.

Hope this helps,
Bob

5

Thank you very much @RobM ! It works exactly as I wanted. :grin:

I’m new to Tailwind CSS, that’s why I’m testing it now. If I have understand it correctly, I do not have to use Tailwind everywhere in my code, I can mix with my own HTML, CSS and Javascript and use Tailwind where I need it?

6

Hi @kalsson1,
That is correct. The Tailwind framework is supposed to provide most of the base styling. But, there will always be room for your custom design. The HTML blocks in Pinegrow can be helpful, but again, they are only a starting point.
Cheers,
Bob