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

Replies 12 (12)
Natztech
Shopify Partner
2237 565 1373

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

 

View solution in original post

dmwwebartisan
Shopify Partner
9824 2234 3071

@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