How to remove navigation & breadcrumbs on mobile site using a custom page template in Simple theme?

Highlighted
Shopify Partner
5 0 0

I have created a new page template and managed to remove the navigation on the desktop, and footer on both desktop and mobile. However, I cannot figure out how to remove the hamburger/navigation on ONLY the pages using the new custom page template on the mobile site.

 

I would also like to remove breadcrumbs ONLY on these pages that use the new custom page template.

 

Any suggestions? Thanks in advance!

0 Likes
Highlighted
Shopify Partner
686 101 220

For the breadcrumbs, you should have something that looks like this {% include 'breadcrumb' %} near the top of your new product template? If so, you just delete it or comment it out.

If helpful then please Like and Accept Solution
0 Likes
Highlighted
Shopify Partner
5 0 0

Thanks, Jon, but no...this is all I have for the template:

 

<!-- /templates/page.liquid -->
<h1 class="small--text-center">{{ page.title }}</h1>

<style>
.site-nav, .mobile-nav-trigger {display: none;}
.site-footer, .mobile-nav-trigger {display: none;}

</style>

<div class="rte">
{{ page.content }}
</div>

 

 

0 Likes
Highlighted
Shopify Partner
686 101 220

Sorry, yes just had a look at the Simple theme code and breadcrumbs are coming from 'theme.liquid'.

 

Code looks like this:

{% if settings.show_breadcrumb_nav and request.page_type != 'index' %}
          {% include 'breadcrumb-nav' %}
        {% endif %}

So you could amend that IF statement to also exclude your template.

If helpful then please Like and Accept Solution
0 Likes
Highlighted
Shopify Partner
5 0 0

Thank you! That's somewhere to start...I haven't figure out how to make it work yet though. LOL 

 

Any ideas on removing the navigation for the mobile site on those specific pages? 

0 Likes
Highlighted
Shopify Partner
686 101 220

Hi - I just hid it with:

 

.mobile-menu-icon {
    display: none;
  }

So add that in with the rest of your CSS.

If helpful then please Like and Accept Solution
0 Likes
Highlighted
Shopify Partner
5 0 0

I'm only wanting to hide the mobile navigation on certain pages, not the entire site. :-/  Desktop was easy to set up, not sure why I can't get it done for mobile. 

0 Likes