Transparent header navigation

Solved
CabWalsh
Tourist
5 0 4

Hi there, my client has asked if it is possible to make the header navigation transparent on the Monfee theme?

 

Thanks in advance,

Cheers,

C

Accepted Solution (1)

Accepted Solutions
Kinjalbuha
Shopify Partner
2302 569 1403

This is an accepted solution.

hello @CabWalsh 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.site-header  {
    background: transparent;
    width: 100%;
    position: relative;
}
.site-header  .grid {
    left:0px;
    position: absolute;
     top:0px;
    background: transparent;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder

View solution in original post

Replies 12 (12)
KetanKumar
Shopify Partner
31569 3149 10560

@CabWalsh 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
CabWalsh
Tourist
5 0 4

Kia ora Ketan,

Thanks for reaching out with my issue. The URL is https://espressomerchants-co-nz.myshopify.com/.

My client would like to make the top nav section transparent so the image below is visible.

 

Screen Shot 2021-10-19 at 6.31.51 PM.png

 

Many Thanks,

Cab

dmwwebartisan
Shopify Partner
10710 2338 3314

@CabWalsh 

Please share store Password.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Zworthkey
Shopify Partner
5581 640 1496

@CabWalsh 
Your Store is password protected.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
Zworthkey
Shopify Partner
5581 640 1496

Hii, @CabWalsh 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
KetanKumar
Shopify Partner
31569 3149 10560

@CabWalsh 

thanks for url but sorry your store is password protect

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kinjalbuha
Shopify Partner
2302 569 1403

hello @CabWalsh 

can you please share you shop preview url 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
CabWalsh
Tourist
5 0 4

Sorry about that, the store password is: nayrib

 

Thanks,

Cab

CabWalsh
Tourist
5 0 4
Kinjalbuha
Shopify Partner
2302 569 1403

This is an accepted solution.

hello @CabWalsh 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.site-header  {
    background: transparent;
    width: 100%;
    position: relative;
}
.site-header  .grid {
    left:0px;
    position: absolute;
     top:0px;
    background: transparent;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
dmwwebartisan
Shopify Partner
10710 2338 3314

@CabWalsh 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

template-index .site-header { position: absolute !important; background-color: transparent !important; width: 100%; z-index: 11;}
.template-index .site-header__mobile-nav { z-index: 11; position: relative; background-color: transparent !important;;}
.template-index .site-nav__link { color: #fff !important;}
.template-index .site-nav__link--active .site-nav__label { border-bottom-color: #fff !important;}
.template-index .site-header__icons-wrapper .icon { fill: #fff !important;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
CabWalsh
Tourist
5 0 4

Thanks very much for this code.

That resolved the issue perfectly. Thanks a mill.

 

Cheers,

Cab