# Styling the built-in navigation

**URL:** <https://community.hubspot.com/t/styling-the-built-in-navigation/23332>\
**Category:** CMS Development\
**Tags:** navigation\
**Created:** [July 23, 2020, 7:56pm UTC](https://community.hubspot.com/t/styling-the-built-in-navigation/23332 "2020-07-23T19:56:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![BethCacciotti](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bethcacciotti/32/28916_2.png) [@BethCacciotti](https://community.hubspot.com/u/BethCacciotti)\
**Post date:** [July 23, 2020, 7:56pm UTC](https://community.hubspot.com/t/styling-the-built-in-navigation/23332/1 "2020-07-23T19:56:01Z")

</div>

![29583i1F56751651E784EA.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/e/9ef9cc00dcfa4bb7d8bfc22065af898a345a70ad.jpeg)

I’m creating a landing page. And using the “navigation” built-in. And I’d like to style the choices so that they maybe underline or change color on hover. But I’m not sure if that’s even possible. And, if it is, where does it happen? I’m using a “theme” from HubSpot - but when I try to edit - it just takes me back to the “Settings” area that give me choices for inputting labels - but not styles.

---

<div class="post-metadata">

**Author:** ![SandyG1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sandyg1/32/77083_2.png) [@SandyG1](https://community.hubspot.com/u/SandyG1)\
**Post date:** [July 23, 2020, 8:08pm UTC](https://community.hubspot.com/t/styling-the-built-in-navigation/23332/2 "2020-07-23T20:08:22Z")

</div>

Hi @BethCacciotti,

Yes this is possible, however, it will need further code adjustments and im not sure if you’ll have the ability to make changes to a hubspot theme. (I’ve not used one before)

If you’re comfortable with making code changes you’ll need to make changes in a file called **fields.json** (either module or theme, theme fields are limited by choice)  
Then, you’ll need to use these new fields in the css file that accompanies the module or the main css file

If you’re comfortable with diving in, you can make the changes yourself if I list them out, otherwise, I could guide you through it. This can seem quite advanced if you’re not used to coding.

---

<div class="post-metadata">

**Author:** ![BethCacciotti](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bethcacciotti/32/28916_2.png) [@BethCacciotti](https://community.hubspot.com/u/BethCacciotti)\
**Post date:** [July 23, 2020, 8:11pm UTC](https://community.hubspot.com/t/styling-the-built-in-navigation/23332/3 "2020-07-23T20:11:01Z")

</div>

Thank you !! I’m self-taught at this point and have my sleeves rolled up. I can make changes to that theme and the .json. Any help is TRULY appreciated ! Bring it.

---

<div class="post-metadata">

**Author:** ![SandyG1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sandyg1/32/77083_2.png) [@SandyG1](https://community.hubspot.com/u/SandyG1)\
**Post date:** [July 23, 2020, 8:12pm UTC](https://community.hubspot.com/t/styling-the-built-in-navigation/23332/4 "2020-07-23T20:12:05Z")

</div>

Okay, bare with me @BethCacciotti whilst I get some kind of useful thing together for you 🙂

(conversation moved to PMs)

---

<div class="post-metadata">

**Author:** ![SandyG1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sandyg1/32/77083_2.png) [@SandyG1](https://community.hubspot.com/u/SandyG1)\
**Post date:** [July 23, 2020, 8:11pm UTC](https://community.hubspot.com/t/styling-the-built-in-navigation/23332/5 "2020-07-23T20:11:16Z")

</div>

Additional documentation  
[Theme and module fields](https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields)

Once these are set, you can use them in the style sheets like so

`{{ theme.NAME.color }}`

or

`{{ module.NAME.color }} /* has to be used in the html in <style></style> */`