Edit a menu item

Develop, Build & Integrate CMS Development
1

Hello people. The question might be stupid (I’m new to hubspot). I searched the subject in the community and I didn’t find what can help me.

I have a menu on the website and I only need to change the color of one menu item. I found where to change the color of the entire menu, but I can’t change the color of each item individually.
I created the color I need in fields.json, but I don’t know where to assign that color to the menu item.

2

Hi @luizsilva,

Thank you for reaching out to the Community, all questions are welcome here!

If I understood correctly, you’re working with HubSpot CMS and you wish to change the color of the global navigation menu? Generally, menu colors are set in theme settings; you can check how to edit theme settings in this Knowledge Base article.

But I believe you only wish to change the color of specific menu items and not the whole navigation bar?

If this is the case, it would be great if you could tell us which theme you’re working with and which menu items you would like to change. It would be great if you can share screenshots. The more info, screenshots and details you can provide, the better the Community can assist.

Cheers
Mia, Community Team

3

Hi @luizsilva ,

Where are you looking to edit a menu item? on a page or?

like your navigation menu item?

To make changes to the CSS of a navigation menu item, you can refer these resources-

Would you be able to provide greater context? like the file name or the folder?

As I am not sure which menu item you are referring to?

If you are able to provide me with more information, I would be able to better advise you. You may also try to look at this resource --> https://knowledge.hubspot.com/design-manager/edit-a-simple-menu-module

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

4

Thanks for your help.

The customization was in CSS.
After customizing the full menu color, I needed to create a sheet in CSS customizing only the last item.

File: your_template > css > _header.css

.left_menu_bar .navigation-primary ul>li:last-child>a {
color: #ffffff;
}