Scrolling / Sticky Navigation Menu showing all White

Site URL: https://www.bloomhomes.com.au

Hello,

I am working with version 7.1 on site url - www.bloomhomes.com.au

I have created a 'scrolling or sticky' menu to my navigation bar.

The problem is, when it scrolls the colour of the menu goes completely white - how do I change the background of the nav bar to be light grey with the text appearing in white?

Second problem, my drop-down nav links show all white too - can I change this to a transparent drop-down menu background and white text?

Thank you in advance for your support!

22 hours ago, michaelpga said:

Site URL: https://www.bloomhomes.com.au

Hello,

I am working with version 7.1 on site url - www.bloomhomes.com.au

I have created a 'scrolling or sticky' menu to my navigation bar.

The problem is, when it scrolls the colour of the menu goes completely white - how do I change the background of the nav bar to be light grey with the text appearing in white?

Second problem, my drop-down nav links show all white too - can I change this to a transparent drop-down menu background and white text?

 

Thank you in advance for your support!

It looks fine to me. Did you solve it?

Yes, the function is fine - I would like to change the colour to transparent and when scrolling for turn to light grey if possible?

On 10/16/2021 at 7:11 AM, michaelpga said:

Yes, the function is fine - I would like to change the colour to transparent and when scrolling for turn to light grey if possible?

Don't remove any code in your current code

Add this to Design > Custom CSS

header#header:not(.shrink) {
    background-color: transparent;
}

Thank you @tuanphan - that worked for making the menu main menu transparent - is there a way to make the scrolling menu colour light grey instead of blue? Thank you!

On 10/19/2021 at 8:12 AM, michaelpga said:

Thank you @tuanphan - that worked for making the menu main menu transparent - is there a way to make the scrolling menu colour light grey instead of blue? Thank you!

Use this

header#header.shrink {
    background-color: grey !important;
}