Remove CSS class in HTML navigation

[Herrmann]

Hello, I want to remove this class "hs-menu-children-wrapper" in the nav HTML. I don't see a way to do this in the files. Is this possible or do I have to create a new nav file?

<li class="hs-menu-item hs-menu-depth-2 active hs-item-has-children active-branch" role="none"><a href="#" role="menuitem">Page Name</a>

<ul role="menu" class="hs-menu-children-wrapper">
<li class="hs-menu-item hs-menu-depth-3" role="none"><a href="#" role="menuitem">Subpage</a></li>
<li class="hs-menu-item hs-menu-depth-3" role="none"><a href="#" role="menuitem">Another Subpage</a></li>
</ul>

</li>

[Jnix284 · Accepted solution]

@Herrmann you would either need to overwrite the module where the HTML is coming from, or you can overwrite the CSS for the class so you don't have to remove it from the HTML.

Are you trying to change the style of the hs-menu-children-wrapper class?

If so, you can use the child.css file in the child theme (if you're website is built with one) or add it to the Site Header HTML in your Website settings.

You could then redefine the CSS definitions for the class.

If you can share a website page link, I'm happy to inspect the code to see where the change needs to be made.

[Techclaro]

Hi @Herrmann 

If you provide a link to a specific webpage, I'd be glad to examine the code and pinpoint where the adjustments should be applied.

Based on my understanding you would need to either modify the module responsible for generating the HTML or override the CSS for the targeted class.

Are you attempting to customize the style of the "hs-menu-children-wrapper" class? If that's the case, you can utilize the child.css file within the child theme (if your website employs one), or you can add the necessary styles to the Site Header HTML in your Website settings. Subsequently, you can redefine the CSS rules for the specified class within the designated file.

You can also check your js files to make sure the "hs-menu-children-wrapper" class was auto added through that script.

Here the better option is to update the CSS file according how you wanted.

[DGarg · Accepted solution]

Hi @Herrmann 

By looking at your HTML, I can deduct that you are using menu field for your nav. You can give your own CSS in the same class and overwrite the default styles. If you want to completely remove this class then you can use JavaScript.

{% require_js %}
<script>
const list= document.querySelector('.hs-item-has-children ul');list.classList.remove('hs-menu-children-wrapper');
</script>
{% end_require_js %}

You can add this script in your header module or in header partial template.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

[Jnix284 · Accepted solution]

@Herrmann you would either need to overwrite the module where the HTML is coming from, or you can overwrite the CSS for the class so you don't have to remove it from the HTML.

Are you trying to change the style of the hs-menu-children-wrapper class?

If so, you can use the child.css file in the child theme (if you're website is built with one) or add it to the Site Header HTML in your Website settings.

You could then redefine the CSS definitions for the class.

If you can share a website page link, I'm happy to inspect the code to see where the change needs to be made.