Changing the style of your navigation menu items

General
1

If you have a navigation menu and want to change the background of that item based on the current page (e.g. highlight the active link), you can achieve this in the Data tab:

  1. Select the link layer of your navigation menu

  2. In the Data tab, add a new binding

  3. Add the property style.backgroundColor : window.location.pathname.includes('/insertYourUrlPathHere') ? 'insert-whatever-active-color-you-want' : 'insert-whatever-default-color-you-want'. You’ll want to adjust the portion /insertYourUrlPathHere to include the path the particular link routes, such as ‘/home’, as well as adjust the colors to match your theme (e.g. ‘blue’ or ‘rgba(0, 0, 0, 0.8)’ or ‘#fafafa’

Screen Shot 2021-01-05 at 12.51.08 PM
Screen Shot 2021-01-05 at 12.51.08 PM1454×736 67.7 KB

  1. Repeat these steps for each link in your navigation menu adjusting the path accordingly.

In this particular example, the background color becomes red when someone navigates to that page. You can also adjust the styling in other ways, such as changing the color of the font, opacity, etc. You would just need to substitute the proper binding for whatever css property it is you want to change. For example, font color would be style.color, opacity would be style.opacity, etc.

1 Like
2

Hi Kara, I’m having some trouble implementing this.

I wanted to change the colour of the font itself so I entered

Get style.color from state.location.pathname.includes(‘faq’) ? ‘#006738’ : ‘#444444

but it doesn’t seem to be working. Since my knowledge of CSS and code in general is limited, I also asked our developers but they couldn’t figure it out either. Would you be able to give me any insight?
As always, thanks a ton!

3

Hi @lenapgl :wave:t2:

Can you send us the link to the Builder page that you are trying to implement this on? I’d be happy to take a look.

4

Ah Maddy, my continual lifesaver! I’d rather not put the link in here, but it’s the same element I sent you my last message about via Intercom. It’s something I’d like to implement in the menu. I hope you’ll be able to find it, if not please get in touch!

5

@lenapgl I took a look at your page and it looks like instead of apostrophe or quotation marks around the colors, there were backticks. I went ahead and changed this as well as added a / in front of the path name. Can you take a look at the page now and let me know if it is working as expected on your end?

6

Hey! Unfortunately, it doesn’t seem to be working. when I visit the About page on our proxy site the About menu item doesn’t go green or do anything.

7

Thanks for checking! I will take another look at your page.

8

Thanks so much!!!
i used it on all four menu items and it is working on three but only the home is retaining the desire colour for text even after navigating to other pages.
thanks