Different background colors for navigation

How To
1

I want to use different background colors for my navigation. For this, I have created a field with ACF, and I can enter a color value for each page. I want the background color to be filled with this value. In the builder, I haven’t found any way to use these dynamic colors in the nav item. Can you please help with that?

Thanks

image
image594×1934 64.8 KB

2

Hi

you can enter the acf field under the RAW tab:

70af0cbd634623e9e2151f19bdc246f775465da6_2_181x500

1 Like
3

Thanks for the tip, that looks simple and understandable. I tested it, and it works, but now I’m running into another issue in my case.

Let’s say I have five pages, each with an ACF field containing a color value. I want to design the navigation so that each navigation item reflects the background color of the respective page. So, it’s going to be a colored navigation :slight_smile: Currently, all navigation items have the background color of the page that’s being viewed.

Maybe the approach is not right; are there better solutions for this endeavor?

I hope this isn’t too confusing, and I appreciate your help in advance :slight_smile:

4

Hi

what kind of menu do you use? e.g. the standard Menu from Wordpress? or the Bricks mega menu?

Or a self-made menu with links?

Cheers

Patric

5

…if you use the Bricks Nav (nestable) element, you can actually set the background individually for each Nav link item:

activemenu

activemenu2
activemenu2348×838 28.8 KB

6

Thanks for the tip. So far, I’ve been using the standard menu item. I’ll give it a try with the other element.

image

7

Maybe you can assign the class to each menu item in WordPress menu and set the background color.

8

Thanks for the tip, I just tested it, but unfortunately, the result is the same. It always takes the ACF field from the header, which is also a page, and not the ACF field of the currently called page.

9

Thank you too. I’ve already thought about this approach and wrote a function that injects the following CSS into the header. With this, I’m trying to target individual pages.

<style>

	:root {
		--page-aboutus-bg: #FFBF43;
		--page-kontakt-bg: #376D7C;
		--page-products-bg: #245FA1;
	}

</style>
10

Yes, you have to hard code the color of each menu item. But I assume the color always says the same, meaning page 1 & menu item 1 = blue background, page 2 and menu item 2 = red, for example.