Ctrlk
Contact support
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Transparent header

Set up transparent navigation and control the sidebar hover background.

Use transparent navigation to let the header or sidebar sit on top of the first section.

This works best with hero-style layouts and full-width media banners.

Basic setup

Transparent navigation requires two settings to be active at the same time.

1

Enable the global setting

  1. Go to Theme Editor → Theme settings → Appearance

  2. Scroll down to Transparent header and sidebars

  3. Enable Allow transparent navigation

  4. Enable Enable on mobile if you want the effect on small screens

2

Set the first section to overlap

  1. Make sure the first section on the page is one of these:

    • Slideshow with media

    • Image banner

    • Video banner

  2. Open that section's settings

  3. Set Section width → Overlap by navigation

Both settings must be active at the same time.

Sidebar navigation hover background

If you use Sidebar-based navigation, the sidebar is designed to be transparent over the first section — and turn white when hovered.

If this animation is not working, check two things:

1. Set the menu style to Overlap slide out

Open Theme Editor → Main sidebar → Main menu block → set Menu style to Overlap slide out

This style is required for the hover background transition.

2. Make sure the menu has nested child links

Go to Shopify Admin → Content → Menus → open your menu and make sure at least one item has child links nested underneath it.

question

If you need help building nested links, see How do I create nested / dropdown menus?.

lightbulb

No nested items in your menu?

Add a Nested menu block in Main sidebar as a workaround.

Go to Main sidebar → Add block → Nested menu.

In Dropdown link, enter the exact name of any existing menu item.

This activates the hover animation without changing your actual menu structure.

Changing the sidebar hover background color

By default, the sidebar hover background uses the color from Theme settings → Colors → Layout → Background.

Make sure Main sidebar → Colors → Color scheme is not set to Set.

If it is set to Set, the background stays visible all the time.

To change the background color across the entire site:

Go to Theme Editor → Theme settings → Colors → Layout and update Background.

This affects all sections and blocks across your store.

Change the sidebar hover color only

Add this in Main sidebar → Custom CSS:

Replace #00ffee with your own color value.

Last updated

Was this helpful?