Transparent Main Menu

SamSukhoonNordl · ‎07-19-2024

Hello I'd like the Custom Liquid video to be shown underneath the menu.

Could anyone help me please?

Also my Logo isn't centered in the middle exactly, I've chosen centered but it centers between search/cart and the text at the left. Two seperate problems but I'd appericate it if anyone could help me with both/any.

Site: Nattstudios.com

Password: 1234

Made4uo-Ribe · ‎07-19-2024

Hi @SamSukhoonNordl

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.

{% if template == 'index' %}
<style>
sticky-header.header-wrapper.gradient:after {
    content: "";
    background: transparent;
    display: block;
    width: 100%;
    height: 50px;
    margin-top: -20vh;
}
sticky-header.header-wrapper.gradient {
    position: relative;
}
</style>
{% endif %}

And Save.
Result:

Note: When you scroll down it will still remain transparent.

The text color, if you change into white when it scroll it wont visible, You need a developer for this.

Also this code only shown on the homepage not on other page.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Made4uo-Ribe · ‎07-19-2024

Hi @SamSukhoonNordl

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.

{% if template == 'index' %}
<style>
sticky-header.header-wrapper.gradient:after {
    content: "";
    background: transparent;
    display: block;
    width: 100%;
    height: 50px;
    margin-top: -20vh;
}
sticky-header.header-wrapper.gradient {
    position: relative;
}
</style>
{% endif %}

And Save.
Result:

Note: When you scroll down it will still remain transparent.

The text color, if you change into white when it scroll it wont visible, You need a developer for this.

Also this code only shown on the homepage not on other page.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Dan-From-Ryviu · ‎07-19-2024

Hi @SamSukhoonNordl

Please add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code

{% if template == 'index' %}
<style>
.header-wrapper { background: transparent !important; }
.scrolled-past-header .header-wrapper { background: var(--gradient-background)!important; }
#MainContent { margin-top: -96px; }
@media (max-width: 749px) {
#MainContent { margin-top: -97px !important; }
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Transparent Main Menu

Transparent Main Menu

Community Blog Articles