# Tailwind Header Block **URL:** \ **Category:** Blocks\ **Created:** [February 4, 2022, 9:05pm UTC](https://forum.pinegrow.com/t/tailwind-header-block/6216 "2022-02-04T21:05:52Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![kalsson1](https://avatars.discourse-cdn.com/v4/letter/k/b77776/32.png) [@kalsson1](https://forum.pinegrow.com/u/kalsson1)\ **Post date:** [February 4, 2022, 9:05pm UTC](https://forum.pinegrow.com/t/tailwind-header-block/6216/1 "2022-02-04T21:05:52Z")
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. ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [February 4, 2022, 9:10pm UTC](https://forum.pinegrow.com/t/tailwind-header-block/6216/2 "2022-02-04T21:10:53Z")
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 ---
**Author:** ![kalsson1](https://avatars.discourse-cdn.com/v4/letter/k/b77776/32.png) [@kalsson1](https://forum.pinegrow.com/u/kalsson1)\ **Post date:** [February 5, 2022, 5:34am UTC](https://forum.pinegrow.com/t/tailwind-header-block/6216/3 "2022-02-05T05:34:10Z")
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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f26d21f516ce2eb6deb1b597164f312a10d1f58f.jpeg) ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [February 5, 2022, 11:29am UTC](https://forum.pinegrow.com/t/tailwind-header-block/6216/4 "2022-02-05T11:29:14Z")
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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/32bf36e49ed16bd41b28b82eeace9b452fd18ada.png) 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 ---
**Author:** ![kalsson1](https://avatars.discourse-cdn.com/v4/letter/k/b77776/32.png) [@kalsson1](https://forum.pinegrow.com/u/kalsson1)\ **Post date:** [February 6, 2022, 6:50pm UTC](https://forum.pinegrow.com/t/tailwind-header-block/6216/5 "2022-02-06T18:50:54Z")
> [@RobM](#): > > n Thank you very much @RobM ! It works exactly as I wanted. 😁 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? ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [February 6, 2022, 8:22pm UTC](https://forum.pinegrow.com/t/tailwind-header-block/6216/6 "2022-02-06T20:22:12Z")
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