How to make mobile navigation menu show only on product/collection pages. (broadcast theme)

[TimTakeTwo]

Hello,

I would like to make the navigation menu on mobile show up only on my product/collection pages and noton front page or any other pages like contact.

Is there a way to achieve this?

Is there a code to hide mobile navigation menu from certain pages?

My website is https://taketwojewelry.com/

Thank you.

[aldy-expatify]

Hi @TimTakeTwo 

You can try to use media query to display the content on mobile view, and you can use the template object to only display the menu on the product or collection page.

For example:

<section>
  // Your another elements
  {% if temeplate.name == 'product'  or template.name == 'collection' %}
    <nav id="secondary-menu">
      // Your menu code
    </nav>
  {% endif %}
</section>

<style>
  @media screen and (max-width: 750px) {
    #secondary-menu { display: block; }
  }
  @media screen and (min-width: 1280px) {
    #secondary-menu { display: none; }
  }
</style>

Hopefully can answer your question 🙂

[TimTakeTwo]

Hello,

Thank you for getting back to me. Where would I add this code section to?

Thank you.