Showit Tutorial: How to Create a Transparent Header Menu in Showit

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.

What happens when you need both a transparent and regular header?

You’ve created a beautiful transparent header that looks stunning on your homepage with that hero image background, but then you realize some pages has a light background at the top and you don’t want a background for certain pages. The solution? Create two versions of your header and strategically place them on different pages.

Step 1: Duplicate your Header

First, you’ll create two separate header canvases in Showit.

1. Go to your existing transparent header canvas
2. Right-click on the canvas name in your canvas list and select “Duplicate”
3. Rename them clearly so you don’t get confused later:
   • “Header – Transparent” (for pages with backgrounds)
   • “Header – Regular” (for pages with plain backgrounds)

Step 2: Adjust your Regular Header

1. Open your “Header – Regular” canvas
2. Add height to the canvas with a background color to the header container
3. Change your logo to a darker version
4. Update your menu text color so it contrasts with the new background

Pro tip: Keep the exact same layout, spacing, and positioning between both headers. The only differences should be the background and colors. This way, when headers swap between pages, visitors won’t notice any jarring layout shifts.

Once it’s all ready, assign the headers to specific pages either as different Canvas Sets or manually.

Having both a transparent and regular header might feel like extra work upfront, but it gives you so much more design flexibility. You can create that sleek, modern transparent header experience where it works best, while keeping everything readable and professional on your content-heavy pages.

Final Thoughts

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!