I’m using this page as a landing page for a product. I want to remove the navigation bar only from this page.
https://shop.moonfarm.us/products/premium-salad-kits
I’ve tried other solutions and they did not work.
Thank you,
Alex
Topic summary
Goal: Hide the navigation bar only on a single product landing page (premium-salad-kits) in the Crave theme.
Proposed approach: Add a Liquid conditional targeting the product handle and inject CSS that hides the header menu. Example variants:
- {% if product.handle contains ‘premium-salad-kits’ %} with CSS: nav.header__inline-menu { display: none; }
- {% if product.handle == ‘premium-salad-kits’ %} with CSS: .header__inline-menu { display: none !important; }
Implementation details: Edit Online Store → Theme → Edit code → theme.liquid. Paste the conditional CSS before the closing tag, then save. If the menu still shows, use display: none !important to override theme styles.
Notes: product.handle is the URL handle for the product, used to target only that page. CSS selector differs by reply (nav.header__inline-menu vs .header__inline-menu); choose the one matching the theme’s markup.
Status: No explicit confirmation from the original poster; solution appears workable but unverified. A screenshot was shared to illustrate where to paste the code, but the code snippet is the key element.
here is the code
{% if product.handle contains ‘premium-salad-kits’ %}
{% endif %}
it check the url of the product and hide the nav you can add it in theme.liquid before closing body tag
please you display: none !important;
if the above code is not working
Hi @MoonFarm
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: paste bellow code in tag → save.
{% if product.handle == ‘premium-salad-kits’ %}
.header__inline-menu { display: none !important; }{% endif %}
Hope that my solution works for you.
Best regards,
Henry | PageFly