Jump to content

How to hide Navigation elements on shopping cart page?

Recommended Posts

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

Link to comment
  • Replies 14
  • Views 2.5k
  • Created
  • Last Reply
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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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 - 

...

image.thumb.png.fc1e66892abbb1435df187b10e42e509.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 - 

...

image.thumb.png.fc1e66892abbb1435df187b10e42e509.png

That's a good idea!

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

Best regards,

Berthold

Link to comment
  • 1 month later...

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.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
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

 

Screen Shot 2020-10-25 at 12.35.06 AM.png

Link to comment
  • 3 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.