Styling the built-in navigation

SOLVE
Highlighted
New Contributor

menu.JPG

 

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.

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Contributor | Partner

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.

 

View solution in original post

4 Replies 4
Highlighted
Solution
Regular Contributor | Partner

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.

 

View solution in original post

Highlighted
New Contributor

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.

 

0 Upvotes
Highlighted
Regular Contributor | Partner

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

 

(conversation moved to PMs)

0 Upvotes
Highlighted
Regular Contributor | Partner

Additional documentation
Theme and module 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> */