How to hide Navigation elements on shopping cart page?

Hello!

I would like to remove certain navigation items in the shopping cart page.

- Template: Brine (Hyde)
- Hide: Primary navigation items 4 and higher (nth-child(n+4))
- Hide: Secondary navigation item 2 (last-child)
- Hide: Footer navigation items 5 and higher (nth-child(n+5))

All other pages work perfectly fine with hiding navigation elements using css codes and targeting their collectionid- and itemnumbers. But I can't seem to find out how to target the shopping cart page.

Appreciate any help! Thank you.

Sincerely,
Berthold

Shop cart page has id: body#cart or body#Cart

On 2/7/2020 at 4:02 PM, tuanphan said:

Shop cart page has id: body#cart or body#Cart

Hi Tuan,

Thanks for your reply.

Unfortunately both don't work. I tried following css code in design - customs css:

body#Cart
.Header-nav--primary 
.Header-nav-item:nth-child(n+4) {
   display: none
  }
body#Cart
.Mobile-overlay-nav--primary
.Mobile-overlay-nav-item:nth-child(n+4) {
   display: none   
  

Do you have an idea, what could be changed?

Thanks a lot for your help!

Berthold

Just now, bertiweber said:

Hi Tuan,

Thanks for your reply.

Unfortunately both don't work. I tried following css code in design - customs css:

body#Cart
.Header-nav--primary 
.Header-nav-item:nth-child(n+4) {
   display: none
  }
body#Cart
.Mobile-overlay-nav--primary
.Mobile-overlay-nav-item:nth-child(n+4) {
   display: none   
  

Do you have an idea, what could be changed?

Thanks a lot for your help!

Berthold

Can you share link to cart page on your site?

23 hours ago, tuanphan said:

Can you share link to cart page on your site?

Yes of course.

It's: www.wandermagic.ch/cart

20 minutes ago, bertiweber said:

Yes of course.

It's: www.wandermagic.ch/cart

missing some spacing character, try this

body#cart .Header-nav--primary .Header-nav-item:nth-child(n+4) {
   display: none;
  }
body#Cart .Mobile-overlay-nav--primary .Mobile-overlay-nav-item:nth-child(n+4) {
   display: none;
}

Also, if you create 2 languages, site, try this guide, by me

2 hours ago, tuanphan said:

missing some spacing character, try this

body#cart .Header-nav--primary .Header-nav-item:nth-child(n+4) {
   display: none;
  }
body#Cart .Mobile-overlay-nav--primary .Mobile-overlay-nav-item:nth-child(n+4) {
   display: none;
}

Also, if you create 2 languages, site, try this guide, by me

Really great guide!

The code for the website and mobile worked, thanks so much!

Another question. As you know, I have a 2-language page. All pages english/german are fine, but the only thing is the cart. Is it possible to make a 2nd cart page? For now I made the cart in English, but if possible it would be nice to also make a cart page for german users.

7 hours ago, bertiweber said:

Really great guide!

The code for the website and mobile worked, thanks so much!

 

Another question. As you know, I have a 2-language page. All pages english/german are fine, but the only thing is the cart. Is it possible to make a 2nd cart page? For now I made the cart in English, but if possible it would be nice to also make a cart page for german users.

No. You can't create 2 cart pages.

But you can add German text, beside English Text

eg: Shopping Cart - Einkaufswagen

TOtal - 

Qty - 

...

12 hours ago, tuanphan said:

No. You can't create 2 cart pages.

But you can add German text, beside English Text

eg: Shopping Cart - Einkaufswagen

TOtal - 

Qty - 

...

That's a good idea!

So, thanks a lot for all your effort, you helped me a lot!

Best regards,

Berthold

Hello everyone! Very useful post, thank you.

I'm trying to hide the secondary nagivation (on cart page) from my bilingual website.

From what I understand I need to add this code to Custom CSS:

body#cart .Header-nav--secondary {
   display: none;
  }
body#cart .Mobile-overlay-nav--secondary {
   display: none;
}

Does it make sense?

Many thanks.

Ewa.

Could you also let me know how to hide the secondary navigation from the "Order confirmed' page?

I use Rally template.

Many thanks.

Ewa.

3 hours ago, Ewa said:

Hello everyone! Very useful post, thank you.

I'm trying to hide the secondary nagivation (on cart page) from my bilingual website.

From what I understand I need to add this code to Custom CSS:

body#cart .Header-nav--secondary {
   display: none;
  }
body#cart .Mobile-overlay-nav--secondary {
   display: none;
}

Does it make sense?

Many thanks.

Ewa.

this code will hide on Cart Page (/cart)

3 hours ago, Ewa said:

Could you also let me know how to hide the secondary navigation from the "Order confirmed' page?

I use Rally template.

Many thanks.

Ewa.

Can you share link to order confirmed page?

On 3/30/2020 at 7:23 PM, tuanphan said:

this code will hide on Cart Page (/cart)

Can you share link to order confirmed page?

Hi @tuanphan, 

any chance you could help me modify the code for my site so that when clients go through the french online store they arrive on a cart with only the english and vice versa? I tried the code above but it only hides my primary navigation partially and permanently.

Also, is there a way of changing "Shopping cart" to "Shopping cart | Panier"?

Lastly, can I change:

• "QTY." to "Case(s)/Caisse(s)"
• "Price" to "Price/Prix"
• "Subtotal" to "Subtotal/Sous-total"

Thanks!

https://www.terroir-imports.com/cart

On 10/25/2020 at 11:40 AM, codefordummies said:

Hi @tuanphan, 

any chance you could help me modify the code for my site so that when clients go through the french online store they arrive on a cart with only the english and vice versa? I tried the code above but it only hides my primary navigation partially and permanently.

Also, is there a way of changing "Shopping cart" to "Shopping cart | Panier"?

Lastly, can I change:

• "QTY." to "Case(s)/Caisse(s)"
• "Price" to "Price/Prix"
• "Subtotal" to "Subtotal/Sous-total"

Thanks!

https://www.terroir-imports.com/cart

I didn't get a notification. Do you still need help on this?

On 11/9/2020 at 9:48 AM, tuanphan said:

I didn't get a notification. Do you still need help on this?

Hi @tuanphan

I would still need help hiding the primary or secondary navigation when clients are using either the French or English version of my site. Any ideas?