How to add a custom navigation above my theme?

BZ-Jacob
Visitor
2 0 1

I would like to add a custom navigation menu above my current theme's navigation menu to make a double nav, however, the theme's styling is heavily interfering with this. I have gone into the "edit code" section where it details the theme code and have inserted custom html in varying places above the nav. This works for the most part but I would have to go through individually on each component to ensure my theme's CSS wasn't overwriting any portion of the custom navigation menu (it has already been built out). A more robust solution would be to utilize the Shadow DOM as detailed in https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#adding_style_elemen..., however, I was unable to get this to work in the Shopify .liquid environment. Other than being granular and ensuring each element in my custom code isn't affected by the theme's, is there a way to insert components that are separated from the theme's CSS and/or JS functions?

 

Reply 1 (1)
BZ-Jacob
Visitor
2 0 1

Would it be too much to show it on here so that others may see it as well if they come across the same problem?