Access Menus at Code Level

[moonfaller]

Hello, I am having an issue with menu flyouts.

I need to be able to add classes to the individual ul items within the menu, because I need to add specific styling to each of them.

Is there a way to access the menu on the code level (not just HUBL).

[Kevin-C]

Hey @moonfaller 

So currently I don't think this is possible, but you're in luck! Using a little slightly more advanced css you can directly target html nodes in your DOM and apply styles as needed.

1) Use your browsers inspector to look at the code generated by HubSpot. See below:

Inspector view

2) Take note of the structure above the UL and LI nodes. You will use them to target specific LI nodes.

3) To access the first LI node in the code above I would write CSS like:

.hs-menu-wrapper ul li.hs-menu-item hs-menu-depth-1 {*CSS goes here}

The above code will generically access all of the LI nodes in the menu at depth "1".

4) Now to reference them specifically you use the :nth-child selector class like so:

.hs-menu-wrapper ul li.hs-menu-item.hs-menu-depth-1:nth-child(1) {*CSS goes here}

"nth-child(1)" in the css above will referebce the first LI node under the node with the "hs-menu-wrapper". Then look for the UL node inside of it. Next its looking for the LI nodes with the "hs-menu-item" and "hs-menu-depth-1". And finally "nth-child(1)" tells it to look for the first (or number 1) LI node with associated classes.

- sequential numbers will allow you to access the other nodes. i.e 2, 3, 4, 5, etc.

5) append these selector classes to you CSS doc and you should be in business.

Hope this helps and wasn't too much.

[moonfaller]

Accessing the code based on generic classes (that are used elsewhere on the page), doesn't really help much.  I ended up using nth selectors to narrow it down. 

But, just because you can do that, doesn't mean that is how it should be done. 

I've ascertained that many people have had an issues with this at points. Even to the point of using HubDB to make menus instead of the menu builder.  

All of these "work around" options take more code and more time.  I think HS needs to make a fix for this.  Either give ID/class ascription abilities on every menu item or give access to a code view for the menu (or both, ideally). 

Anyways, thanks for the help everyone! 

Happy HubSpotting!

[dennisedson]

@moonfaller-- we just spoke on slack.  Maybe we need to start upvoting this idea