Remove navigation on product page

Site URL: https://www.haveteewilltravel.com/store-2

Hello, 

I am trying to remove the navigation links on a product page or shopping page. I would like to do this on individual pages, not the entire site. I found some code that was supposed to do the trick, but didn't seem to work. This is the code I tried. 

<style>

/* REMOVE TOP SECTIONS - Header, Mobile Header, Announcement Bar */

.Header, .Mobile-bar, .sqs-announcement-bar {display:none !important;}

/* REMOVE BOTTOM SECTIONS - Footer */

.Footer {display:none !important;}

</style>

Hi. Above link doesn't exist. Can you check url?

I found what I was looking for. Sorry for not seeing this till just now. Thank you for the response. I simply adjusted my pages to "not listed" and found the setting to not display local navigation in the specific product page. 

@tuanphanFigured I'd add to same thread, trying to do this also but it can be for all the product pages. My client's site is set to private but see attached screenshot. Want to remove the navigation at the top, as these are client specific invoices and they shouldn't see the rest of the store. Thank you.

6 hours ago, RikkiG said:

@tuanphanFigured I'd add to same thread, trying to do this also but it can be for all the product pages. My client's site is set to private but see attached screenshot. Want to remove the navigation at the top, as these are client specific invoices and they shouldn't see the rest of the store. Thank you.

You mean "Invoices > Editing.."?

2 hours ago, tuanphan said:

You mean "Invoices > Editing.."?

Yes

On 1/21/2022 at 11:28 AM, RikkiG said:

Yes

Can you share link to product? Url in first question doesn't exist

@tuanphanHere is the link: https://www.frencholistic.com/invoices/p/editing-clientx

Think I figured it out:

.ProductItem-nav-breadcrumb-link, .ProductItem-nav-breadcrumb-separator {
  display:none
}

Hi @RikkiG 

How did this work for you? I'm trying to do the same and make the small navigation within the product page disappear. Your help would be much appreciated  

On 9/13/2023 at 3:18 AM, anastasiosmoiras said:

Hi @RikkiG 

How did this work for you? I'm trying to do the same and make the small navigation within the product page disappear. Your help would be much appreciated  

Add this to Website > Website Tools > Custom CSS

nav.ProductItem-nav {
    display: none;
}

(If you mean to remove this)

@tuanphan Thank you so much! That worked. 

I'm also trying to hide the image from some or all product pages. I'm using the 'wrap' product section design which looks just fine without an image on desktop but on mobile it created a 'blank' space for the images and put the product title far down the page. Any idea how to fix it? 

15 hours ago, anastasiosmoiras said:

@tuanphan Thank you so much! That worked. 

 

I'm also trying to hide the image from some or all product pages. I'm using the 'wrap' product section design which looks just fine without an image on desktop but on mobile it created a 'blank' space for the images and put the product title far down the page. Any idea how to fix it? 

Can you share link to some products where you want to hide images? We can check easier

@tuanphan https://travel-boutique.com/explore/p/best-of-greece-28-may-2-june

Password: dphworld

If you look at the above link, the desktop without an image looks fine however mobile has a placeholder space on the top. 

On 9/20/2023 at 2:46 AM, anastasiosmoiras said:

@tuanphan https://travel-boutique.com/explore/p/best-of-greece-28-may-2-june

Password: dphworld

If you look at the above link, the desktop without an image looks fine however mobile has a placeholder space on the top. 

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
figure.pdp-gallery {
    display: none !important;
}
}

This worked! Thank you.