Can you make the header navigation transparent on the Monfee theme?

Store Design
1

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

2 Likes
2

@CabWalsh

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

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

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

3

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
Screen Shot 2021-10-19 at 6.31.51 PM.png2884×1024 587 KB

Many Thanks,

Cab

1 Like
4

@CabWalsh

Please share store Password.

Thanks!

5

@CabWalsh
Your Store is password protected.

6

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

7

@CabWalsh

thanks for url but sorry your store is password protect

8

hello @CabWalsh

can you please share you shop preview url

9

Sorry about that, the store password is: nayrib

Thanks,

Cab

10

Preview link: https://p8izbjfbxkcse7gt-58753253533.shopifypreview.com

1 Like
11

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;
}
12

@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!

13

Thanks very much for this code.

That resolved the issue perfectly. Thanks a mill.

Cheers,

Cab