How to remove a single button from a custom HTML menu in Debut theme?

[Paul_Moutzouris]

We’re using the Debut theme with some custom HTML content. We’ve got a secondary menu that is different to the main navigation menu at the very top of the page. The HTML content is below and was created as a custom snippet:

  

    - Overview

    - Pokit Meter

    - Pokit Pro

    - Accessories

    - Bundles
  

What we’re wanting to do is remove one of the list items only on a single page (/products/pokitmeter) as circled in the image below. We want that to still be visible on all other pages. Does anybody know how this could be achieved?

[dmwwebartisan]

@Paul_Moutzouris

Please find this code

- Pokit Meter

Replace to

- Pokit Meter

Add following code your css file .

.Pokit_Meter{ display:none !important;}

Thanks!

[r8r]

@Paul_Moutzouris - here‘s a css based minimum evasive option:

{% if product.handle == 'pokitmeter' %}
{% style %}
.filters-toolbar li:nth-child(3) {
  display: none;
}
{% endstyle %}
{% endif %}

You can pretty much add that to wherever the list markup gets included too.
Hope this helps, Mario

[Paul_Moutzouris]

Thanks for the reply!

It works in that it hides the ‘Pokit Pro’ button on the Pokit Meter page, but it does hide it on all pages aside from the home page. Is there a way to make it exclusively for the Pokit Meter page?

[Paul_Moutzouris]

Hi r8r, thanks for the reply. It seems that this just replaces the 3rd nth-child with ‘Pokit Meter’ instead of Pokit Pro, rather than removing Pokit Pro

[r8r]

@Paul_Moutzouris - no, the code only hides an element in the navigation. Your description does not match what the code can do; unless there is other code, unknown to me, causing side effects. Without seeing the actual site in action, it’s of course somewhat like stabbing in the dark.

Mario

[Paul_Moutzouris]

@r8r Here is a link to our site: https://shop.pokitmeter.com/products/pokitmeter

I have used the solution suggested by @dmwwebartisan but it has removed the ‘Pokit Pro’ button on all pages except the Overview/home page. We only want it removed on the Pokit Meter product page.

[r8r]

@Paul_Moutzouris – I cannot verify the problem with my code …

Granted, I just noticed I took the screenshot from the wrong page, but you’ll see that removing the code from @dmwwebartisan and adding mine will make the 3rd link disappear; and the code should only load, when the produc-page for pokitmeter is loaded:

This should be the case when viewing pokitmeter:

This should be the case for all other sites:

Can you add the following code to your theme.liquid file? Just for debugging purposes.

{% if product.handle == 'pokitmeter' %}

{% style %}
.filters-toolbar li:nth-child(3) {
  display: none;
}
{% endstyle %}
{% endif %}

Mario

[Paul_Moutzouris]

Hi @r8r

I have removed all code suggested by @dmwwebartisan and replaced it with your suggestions. It is working the same as your screenshots, and is how we want it on the Pokit Meter page.

On the Accessories and Bundles page, it is showing the ‘Pokit Meter’ link twice. Is it possible to make this appear as ‘Pokit Pro’ as it is on the Overview page?

[r8r]

@Paul_Moutzouris – here is the code snippet from https://shop.pokitmeter.com/products/pokitmeter:

Seems like the navigation you attached there has the same link twice (one of them gets visually hidden by the code I gave you). Can you double check that in your nav-settings?

Mario

[Paul_Moutzouris]

Hi @r8r must have overlooked that - thanks for pointing this out as this was the issue. It’s all working as we want it now, so thank you for all your assistance!

[r8r]

@Paul_Moutzouris - you‘re welcome! Glad you got it figured out.

PS: Feel free to mark the post as the solution!