Change Menu Background Color In Electronics 3

Hi,

I am trying to find a way to change the background color in the Electronics 3 demo which is in purple to some other color. I don’t find an option unless to override via custom code.

Is there a place I can tweak the settings?

https://woodmart.xtemos.com/electronics-3/product/apple-iphone-15-pro/

Attachments:

You must be logged in to view attached files.

Hello,

It is inherited from the primary color set in Theme Settings -> Styles & Colors. If it doesn’t work for you, please send us your admin access so we can investigate and see what is wrong to help you.

Kind Regards

Hi,

We’ve already set this to a different color in Theme Settings -> Styles & Colors, but it still shows the default purple from the demo.

Please let me know how this can be fixed.

Thanks in advance.

Hi,

To change the hover/active navigation background color on a single product page, you need to open the single product editor and select the settings for the menu element responsible for this navigation. Then, go to the Style tab, select the menu state you want to customize (Hover or Active), and change the background color to your preferred one. Screanshot: https://monosnap.ai/file/ARFxdnKVOlNErnMpN6WYmwCs7nKbJK

Kind Regards

Hi Bogdan Donovan,

Thanks. It’s working. I also wish to know how we can make that specification menu sticky? On your original demo it’s sticky when scrolled down. https://woodmart.xtemos.com/electronics-3/product/apple-iphone-15-pro/

But when we imported the demo, the sticky function did not work even though we’ve given the parent row Equal height and made the column that contains the menu sticky.

Please let me know how we can fix this.

Thanks again.

Our Electronics 3 demo is built using the Gutenberg editor, which includes a native sticky positioning option. Unfortunately, WPBakery, which you are currently using, does not yet have the technical capability to implement similar functionality. If it becomes possible in the future, we will certainly add a corresponding option for WPBakery as well.

However, if having sticky navigation on your single product page is essential while using WPBakery, we can try to prepare a custom code snippet upon your request to replicate the navigation sticky effect available in Elementor or Gutenberg.

Kind Regards

Hi Bogdan,

Thank you for letting me know about the limitation. Yes, we are using WP Bakery as the builder due to the nature of its user friendliness. Looking forward for this feature in the WP Bakery.

In the mean time; I would appreciate it if you can provide a custom snippet to replicate the navigation sticky effect and where to put them.

Thanks in advance.

Hi,

To begin, you need to find the row containing the menu you want to make sticky. Locate the Extra class name field and add the custom class sticky-navigation to it: https://monosnap.ai/file/CbE7uP35aqMpGK5WcbIIwhm0Y8UAdC
Next, go to Theme Settings and add the following custom code to the Global Custom CSS Area field located in the Custom CSS section:

.sticky-navigation {
   position: sticky;
   z-index: 99;
   top: calc(var(--wd-header-h) + 20px);
}

Kind Regards

Hi Bogdan,

Thank you for sharing the above snippet. Had to give top: calc(var(--wd-header-h) - 10px); to replicate the exact distance though. Worked like a charm.

Looking forward for the native support on WP Bakery without the snippet option.

Please mark this topic as resolved.

[Author]

Posts