Hide navigation bar and footer on a specific landing page - Prestige Theme

liu_x_trujillo1 · ‎10-30-2024

I am designing a landing page to drive ad traffic, and I'd like to remove the navigation bar on this page only.

I created a custom template specifically for this landing page, but when I removed the navigation bar in this template, it disappeared across the entire website. Could anyone please let me know how to resolve this issue?

Website URL: embroidtale.com

WIP LP URL: https://embroidtale.com/pages/lp/dedicated-landing-page-m3vnzlcf

Olllie · ‎10-30-2024

Hey, Give this a go.

Navigate to Online Store > Themes > Edit code. (you may wish to duplicate your theme, so you can test out of production)
Open your layout/theme.liquid file.
Just above the closing </head> tag, add the following code (make sure to replace the handle text with the handle name of your page):

{% if page.handle == 'enter-the-page-handle' %}
<style>
.header__primary-nav { display: none !important; }
</style>
{% endif %}

Let me know if this doesn’t work. If it does, please remember to mark this as the solution.

Ollie | Founder & Developer of autoBlogger

autoBlogger: Seamlessly scheduled, fully automated, AI-powered, and SEO-optimised blogging with a host of free extras! Start your 14-day free trial today!

Discover more at autoBlogger.bot!

liu_x_trujillo1 · ‎11-01-2024

Hi @Olllie

Thanks for your reply! I replaced the page handle with "dedicated-landing-page-m3vnzlcf" then added it before <head>, (see below screenshot) but it didn't work. Should we make any further adjustment to the code? BTW, my page-handle looks very weird with the string "m3vnzlcf". Do you have any idea what that is?

Hide navigation bar and footer on a specific landing page - Prestige Theme

Hide navigation bar and footer on a specific landing page - Prestige Theme

Community Blog Articles