Sticky Menu Background Colour

This topic has 16 replies, 6 voices, and was last updated 3 years, 8 months ago by Fernando.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
February 26, 2022 at 6:19 am #2134381

Gyan

Dear Sir/Madam,

I have purchased the lifetime premium version of GP recently. I have enabled the Sticky Menu option for both mobile & desktop, but dont seem to see any option for background colours in the Theme Settings. I have checked all the options under Colour Settings but dont see anything available to change the background color for it.

Am I missing something? Please help!

Thanks a ton

Best regards,

Gyan Shah.

February 26, 2022 at 6:28 am #2134391

David
Staff
Customer Support

Hi there,

the Sticky Navigation inherits the colors you set for the Primary Navigation.

Are you wanting something different to that ?

February 26, 2022 at 6:42 am #2134404

Gyan

Thanks David, for the prompt reply.

Yes, I would like the sticky navigation to inverse…

For example, my LOGO & menu TEXT is coloured and the header & primary navigation background is transparent.

But when a user scrolls down, I want the sticky menu to be coloured and my LOGO and TEXT to be WHITE.

I have already put the white logo for the sticky nav, but I don’t see any options to change the background colour when sticky nav is enabled… I’m sure there is a way to do that as i’ve seen it as a common feature on many websites. Infact, have even seen gradient background colours on websites.

Your help would be greatly appreciated.

February 26, 2022 at 8:35 am #2134615
David
Staff
Customer Support
OK – try adding this CSS:
```
.main-navigation.is_stuck,
.main-navigation.is_stuck ul ul{
    background-color: #636380;
}
.main-navigation.navigation-stick .main-nav ul li a,
.main-navigation.navigation-stick a:not([aria-label*='Close'])  {
    color: #fff !important;
}
```
February 26, 2022 at 8:56 am #2134648

Gyan

Dear David,

Thanks a ton for your reply. Have added the CSS although it isn’t working as it should. In fact, have even set the menu background colours & text colours for primary & secondary navs but it’s not showing the way it should on Mobile or desktop.

Could you please refer to the site https://inzujewels.com for an idea?

When tapping the hamburger main menu on mobile, the text menu is clashing with the background as there is no colour in the menu background, even though I have set the colours.

Anyway, hope you can help out with this.

Thanks

Gyan.

February 26, 2022 at 9:08 am #2134655

David
Staff
Customer Support

In the Colors > Primary Navigation – give it a Background color that matches the Body color instead of it being transparent.

February 26, 2022 at 9:17 am #2134660

Gyan

Yes the background color for primary nav is set as the body color and not transparent!

Also, what about the CSS code you had provided? It’s not working correctly? Did you check the URL I shared?

February 26, 2022 at 10:24 am #2134720

David
Staff
Customer Support

Maybe i misunderstood but this is how it looks on my desktop:

https://www.screencast.com/t/TrXJ9m5f86t

March 8, 2022 at 4:37 am #2146500

Gyan

Dear David,

I am not sure what you’re seeing as the menu colours are not working correctly either on mobile…

1. While scrolling down the hamburger menu icon or 3 lines are not appearing white unlike the other icons & text. Why is that as it should become white by default since I had set the text colour white. Please see the snapshot attached – https://theflagcorp.com/wp-content/images/mobile01.png

2. The drop down menu when tapped does not have the purple background colour but has white text so it’s clashing as you can see in the snapshot here – https://theflagcorp.com/wp-content/images/mobile02.png

I have gone through the colour settings again and again but don’t see how these issues can be fixed as by changing either 1 colour, something else is not working correctly. Thus, if i change the colours again now, it will work correctly for mobile but not for desktop and vice versa.

Your help would be really appreciated.

Thanks

Gyan.

March 8, 2022 at 5:14 am #2146534

Gyan

Also, could you please confirm if Mobile Menu should be enabled or not?

What is the use?

March 8, 2022 at 5:50 am #2146571

David
Staff
Customer Support

Can you confirm if the desktop colors as per my video are correct ?

May 11, 2022 at 9:17 am #2216681
Jason
Hi David,

I have been following along, attempting a similar sticky menu.

I added a background opacity to the sticky menu using the ‘opacity’ line shown below. However, now the menu text is also transparent. Is there a way to limit the background of the sticky menu to the part being transparent, and there would be no opacity on the text?
```
.main-navigation.is_stuck,
.main-navigation.is_stuck ul ul{
    background-color: #636380;
    opacity: .3;
}
.main-navigation.navigation-stick .main-nav ul li a,
.main-navigation.navigation-stick a:not([aria-label*='Close'])  {
    color: #fff;
}
```
May 11, 2022 at 9:45 am #2216703

Leo
Staff
Customer Support

Hi there,

Any chance you can link us to the page in question?

Feel free to open a new topic so you can use the private info field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

May 11, 2022 at 9:58 am #2216714
Jason
Hi Leo,

I found out that transparency waterfalls downwards, so moving the text code above the background code, along with this rgba function seems to have done the trick.

The site is layerthree.xyz.

For anyone else looking, here is the code to get the sticky menu text to 0 opacity, and the sticky menu background to 40% opacity:
```
.main-navigation.navigation-stick .main-nav ul li,
.main-navigation.navigation-stick a:not([aria-label*='Close'])  

{
    color: #fff; 
}	

.main-navigation.is_stuck,
.main-navigation.is_stuck ul ul

{
    background-color: rgba(224,49,79, .4);
}
```
Thanks for the quick response!

Jason
May 11, 2022 at 10:54 am #2216769

Leo
Staff
Customer Support

Glad to hear 🙂
Author

Posts