Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
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
Solved! Go to the solution
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;
}
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.
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.
Many Thanks,
Cab
Please share store Password.
Thanks!
Hii, @CabWalsh
Kindly share your store URL so,
I can solve it perfectly.
Thank You.
thanks for url but sorry your store is password protect
hello @CabWalsh
can you please share you shop preview url
Sorry about that, the store password is: nayrib
Thanks,
Cab
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;
}
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!
Thanks very much for this code.
That resolved the issue perfectly. Thanks a mill.
Cheers,
Cab
User | RANK |
---|---|
135 | |
91 | |
77 | |
68 | |
43 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022