topic Re: Styling the built-in navigation in CMS Development

Styling the built-in navigation

BethCacciotti — Thu, 23 Jul 2020 19:56:01 GMT

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.

Re: Styling the built-in navigation

SandyG1 — Thu, 23 Jul 2020 20:08:22 GMT

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.

Re: Styling the built-in navigation

BethCacciotti — Thu, 23 Jul 2020 20:11:01 GMT

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.

Re: Styling the built-in navigation

SandyG1 — Thu, 23 Jul 2020 20:23:51 GMT

Additional documentation
Theme and module fields

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

{{ theme.NAME.color }}

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

Re: Styling the built-in navigation

SandyG1 — Thu, 23 Jul 2020 20:31:20 GMT

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

(conversation moved to PMs)