How to Create a Transparent Header Menu in Showit (Step-by-Step Tutorial)

Do you like the look of websites with a transparent navigation that seem to float over a full screen image or video background? If you’ve been wondering how to create a transparent header menu in Showit, this tutorial is for you!

Creating Your Transparent Header Menu in Showit

Ready to create this beautiful transparent header menu effect? Here’s exactly how to do it:

Step 1: Set Up Your Header Menu Canvas

Start by going to your header section in Showit. Here’s the key trick that makes your transparent header menu work: Set your header canvas height to just 1px.

This tiny canvas height means you’re essentially designing over an empty element. Your header content will still be visible and functional, but it won’t take up any actual space on the page.

Step 2: Design Your Header Menu Content

Now you can design your header! Add your logo, navigation links, and any other header elements you want. Since you’re working with a transparent header menu, make sure your text and logo have good contrast against whatever will be behind them.

Consider adding a subtle overlay to your hero image or adjusting your text colors as your header menu text needs to be readable against your background. If your hero image is busy, you might want to choose a different background.

Step 3: Position Your Header Menu

Once your header section sits above a different section below (like your hero section), it will naturally hang over anything you place in that second section. Your transparent header menu will appear to float over your hero image or video background.

Step 4: Adjust the Stacking Order

If your header isn’t showing up properly, the issue is usually with the stacking order. Make sure your header’s stacking order is set higher than the section below it. This ensures your header appears on top and stays visible. To adjust this in Showit, select your header canvas and increase the stacking order number on the right-side menu until it appears above your hero content.

Final Thoughts

Creating a transparent header menu in Showit is one of those design techniques that can instantly elevate your website’s look and feel.

If you’re feeling stuck or want someone to walk through this process with you, I’m always here to help! And if you love the transparent header menu look and are wanting to build a website on Showit, I have a few gorgeous pre-made Showit templates in my shop that already have this transparent menu feature.