Transparent menu on header

Public Ticket #7247

Conversation thread

onyke replied

7 years ago

Customer Reply

Thanks! You are the best!

PenciDesign replied

7 years ago

Staff Reply

Hi,

Ok, please replace the code I sent to this code:

#navigation-sticky-wrapper{ position: absolute; z-index: 1000; width: 100%; }
#navigation.header-1, #navigation.header-4, #navigation.header-7{ border-bottom-color: transparent; }
#navigation{ background: rgba(255, 255, 255, 0.2);}
.is-sticky #navigation{ background: rgba(255, 255, 255); }

Best Regards,

PenciDesign

onyke replied

7 years ago

Customer Reply

I want to get the following effect:

After entering the main page the menu is on the top and has a transparent color.
When we scroll down the page, this menu changes color to white.

Screen 1:
After entering the site (done)

Screen 2:
After scrolling the page down (I want to achieve this effect)

PenciDesign replied

7 years ago

Staff Reply

Hi,

Have you checked to disable sticky menu via Customize > Logo and Header Options ?

Best Regards,

PenciDesign

onyke replied

7 years ago

Customer Reply

Thanks!

Its possible to change menu background color to white when i scroll down page?

.is-sticky #navigation dont work :(

Already added:

#navigation-sticky-wrapper{ position: fixed; z-index: 1000; width: 100%; }
#navigation.header-1, #navigation.header-4, #navigation.header-7{ border-bottom-color: transparent; }
.is-sticky #navigation{ background: rgba(255, 255, 255);}
#navigation{ background: rgba(255, 255, 255, 0.2);}

PenciDesign replied

7 years ago

Staff Reply

Hi,

Please try add more this code to Customize > Custom CSS to do that:

#navigation-sticky-wrapper{ position: fixed; z-index: 1000; width: 100%; }
#navigation.header-1, #navigation.header-4, #navigation.header-7{ border-bottom-color: transparent; }

Best Regards,

PenciDesign

onyke started the conversation

7 years ago

Conversation Start

Hello, how i can get effect like on "menu_v2"? I already put this code in "Custom CSS":

#navigation{ background: rgba(255, 255, 255, 0.2); }
.is-sticky #navigation{ background: rgba(255, 255, 255); }

But now i need to move menu a bit lower. It is possible?

Want to join this conversation or access attachments? Sign in first.