Change header and menu like the website fearofgod.com

Millennialz17 · ‎09-11-2024

Hey, can someone help me to edit my shopify store like the mobile version of fearofgod.com?

I want the header transparent and if i scroll down it should turn white.

And when i open the menu it should be completely blurred and the header hidden (like the cart when its open).

Just for the mobile version.

Thank you

Dan-From-Ryviu · ‎09-11-2024

Code update

{% if template == 'index' %}
<style>
.section-header sticky-header { 
    background: transparent; 
}
body .section-header.scrolled-past-header sticky-header {
    background: #fff !important;
}
#MainContent { 
    margin-top: -144px; 
}
@media (max-width: 749px) {
    #MainContent { margin-top: -72px !important; }
}
</style>
{% endif %}
<style>
@media (max-width: 749px) {
    .menu-drawer,
    body sticky-header:has(.menu-opening) {
        background: #ffffffe6 !important;
        backdrop-filter: blur(4px);
    }
    body sticky-header:has(.menu-opening) .header__heading,
    body sticky-header:has(.menu-opening) .header__icons {
       display: none;
    }
}
</style>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎09-11-2024

Hi @Millennialz17

Please share your store URL please

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Millennialz17 · ‎09-11-2024

https://millennialz.de/

Dan-From-Ryviu · ‎09-11-2024

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

{% if template == 'index' %}
<style>
.section-header sticky-header { 
    background: transparent; 
}
body .section-header.scrolled-past-header sticky-header {
    background: #fff !important;
}
#MainContent { 
    margin-top: -144px; 
}
@media (max-width: 749px) {
    #MainContent { margin-top: -64px !important; }
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Millennialz17 · ‎09-11-2024

really nice the header 😁 but the menu is not the same like the one in fearofgod.com.

Can u give me a code for fullsized and blurred menu please?

Dan-From-Ryviu · ‎09-11-2024

Forgot that, give me a few minutes

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu · ‎09-11-2024

Please update the code.

{% if template == 'index' %}
<style>
.section-header sticky-header { 
    background: transparent; 
}
body .section-header.scrolled-past-header sticky-header {
    background: #fff !important;
}
#MainContent { 
    margin-top: -144px; 
}
@media (max-width: 749px) {
    #MainContent { margin-top: -72px !important; }
}
</style>
{% endif %}
<style>
@media (max-width: 749px) {
    body sticky-header:has(.menu-opening) {
        background: #fff !important;
    }
    body sticky-header:has(.menu-opening) .header__heading,
    body sticky-header:has(.menu-opening) .header__icons {
       display: none;
    }
}
</style>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Millennialz17 · ‎09-11-2024

You are a genius! I just got one thing remain. On the website fearofgod.com is the background from the menu blurred. Is it possible to code it too?

Dan-From-Ryviu · ‎09-11-2024

Code update

{% if template == 'index' %}
<style>
.section-header sticky-header { 
    background: transparent; 
}
body .section-header.scrolled-past-header sticky-header {
    background: #fff !important;
}
#MainContent { 
    margin-top: -144px; 
}
@media (max-width: 749px) {
    #MainContent { margin-top: -72px !important; }
}
</style>
{% endif %}
<style>
@media (max-width: 749px) {
    .menu-drawer,
    body sticky-header:has(.menu-opening) {
        background: #ffffffe6 !important;
        backdrop-filter: blur(4px);
    }
    body sticky-header:has(.menu-opening) .header__heading,
    body sticky-header:has(.menu-opening) .header__icons {
       display: none;
    }
}
</style>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Millennialz17 · ‎09-11-2024

Thank you so much bro

Dan-From-Ryviu · ‎09-11-2024

You are very welcome!

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Millennialz17 · ‎09-11-2024

I've been looking for it for two days and tried all the codes but none worked. I would be really happy if it worked now.

Change header and menu like the website fearofgod.com

Change header and menu like the website fearofgod.com

Community Blog Articles