How to hide on GRIDS the Navigation Header and Footer from my Landing Page?

[TIMECAPSULES]

Hi,

I have created a new Advertising Landing Page that I created:

https://XYZXYZ/pages/i-live-on-landing-page

Note: XYZXYZ is a placeholder generic, the rest is actual url

I need to hide the both the Navigation Header and the Footer, on a specific webpage only (and not affect the rest of the website).

Can anyone show me how to do this i.e. what code do ?

Thanks,

Timecapsules

[B2Bridge]

Hi, @TIMECAPSULES. Can you share us your store url?

[TIMECAPSULES]

Hi,

https://i-live-on.com/pages/i-live-on-landing-page

[B2Bridge]

You mean this, right?

[TIMECAPSULES]

Yes that is our landing page

[B2Bridge]

Ok, so you want to hide header and footer on that page, right? (if you want hide its on another page, please give us a list of page you want to hide)

[TIMECAPSULES]

Correct .... hide header and footer on this page - only

[TIMECAPSULES]

we are using Pixel Union Grids theme:

https://pixelunion.net/products/grid

Version 6.1.1 .... we ahve not upgraded to the latest 6.3.1

[B2Bridge]

Ok, to do that, you can follow our instructions:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find theme.liquid file

Step 3: Paste this code before close </body> tag:

{% if request.path contains "pages/i-live-on-landing-page" %}
  <style>
    #shopify-section-sections--18339250700345__header,
    #shopify-section-sections--18339250634809__footer {
     display: none !important;
    }
  </style>
{% endif %}

[TIMECAPSULES]

Nope, I inserted the code in theme.liquid - not working .... I waited a little while before I replied, give it time to push the change through the internet

[TIMECAPSULES]

Wait a sec .... it did work. 

[TIMECAPSULES]

I had to put in:

{% if request.path contains "pages/i-live-on-landing-page" %} .... when I copied it initially, it had inserted in your bridge name!

[TIMECAPSULES]

THANK YOU .... I want to put a comment into the code, just above this new code segment. How do I do that please?

[B2Bridge]

Put this at above of the code:

<!-- Your comment here --> 

[TIMECAPSULES]

Also .... is it possible to also remove the top line that says "Your Story, Your Way" as well?

I hadn't realized it would stay

[B2Bridge]

Use this, please:

{% if request.path contains "pages/i-live-on-landing-page" %}
  <style>
    #shopify-section-sections--18339250700345__header,
    #shopify-section-sections--18339250634809__footer,
    #shopify-section-sections--18339250700345__announcement_bar {
     display: none !important;
    }
  </style>
{% endif %}

[TIMECAPSULES]

Thank you B2Bridge. The Landing Page looks great now, no distractions .... just one action, if the person looking at the page is interested .... this is what my Digital Marketing person told me.

[TIMECAPSULES]

B2Bridge .... what can I do for you?

[B2Bridge · Accepted solution]

If this work, please give us a like and marking its as a solution. Thanks you 😍