Need Help Keeping Header Transparent on Hover for Stiletto Theme

Shopify Discussion
1

Hello everyone,

I’m using the Stiletto theme on my Shopify store and am having trouble keeping the entire header transparent when hovering over the main menu links. I have the transparent header option enabled in the theme editor, which works initially, but the background still becomes opaque when I hover over the menu links or logo section.

I managed to make the sub-menu items background transparent using custom CSS based on another thread I found. However, I can’t seem to figure it out for the main menu links and the logo section.

Here’s the CSS code I added to my theme.liquid file:

<style>
    .navigation__submenu-list {
        background: transparent!important;
        color: #EDE6D6!important;
        border: solid #EDE6D6 1px!important;
    }

    .header__links-list fs-navigation-base {
        background: transparent!important;
        color: #EDE6D6!important;
    }

    .header__links header__links-primary {
        background: transparent!important;
        color: #EDE6D6!important;
    }

    .header.header--layout-logo-center-nav-below.header--has-logo.header--transparent.header--has-transparent-logo.header--navigation-is-all-caps:hover {
        background: transparent!important;
    }
</style>

Despite this, the header still changes to a non-transparent background when I hover over the main menu links.

Store URL: https://highfallscannany.com/

Any help on how I can keep the entire header, including the main menu links and logo section, transparent on hover would be greatly appreciated!

Thank you in advance!

2

You need to make sure your CSS targets the right classes without conflicting with theme styles. Adjust your CSS as follows:

/* Main Header Container */ .header { background: transparent !important; transition: background 0.3s ease; /* Smooth transition */ } /* Ensure Header Remains Transparent on Hover */ .header:hover { background: transparent !important; } /* Main Navigation Links */ .navigation__link { color: #EDE6D6 !important; /* Text color */ background: transparent !important; transition: color 0.3s ease; } /* Main Navigation Links on Hover */ .navigation__link:hover { color: #F5E9D6 !important; /* Change hover color if needed */ background: transparent !important; } /* Submenu List */ .navigation__submenu-list { background: transparent !important; color: #EDE6D6 !important; border: solid #EDE6D6 1px !important; } /* Logo Section */ .header__logo { background: transparent !important; transition: background 0.3s ease; } /* Logo on Hover */ .header__logo:hover { background: transparent !important; }