Jump to content

Add cart in to top mobile navigation

By TomPickford, in Other

Go to solution Solved by Web_Solutions,

Recommended Posts

TomPickford Level 2

TomPickford

Posted
Posted

Hi there,

Would anyone be able to help with some code injection to get the shopping cart to show in the mobile/tablet navigation, rather than be hidden behind the drop-down menu.

It's currently viewable on the web view, but once on mobile or tablet it gets hidden.

There is also no option to show it when editing the template in "Site Styles" and having spoken to someone at Squarespace, they've suggested asking for help with some code to fix this issue.

Please see photos attached:

- Web view 
- Mobile view where hidden
- Mobile view where shown in the drop-down menu

Thanks in advance for any help here.

Best,

Tom

Screenshot 2023-09-28 at 07.24.15.png

Screenshot 2023-09-28 at 07.24.30.png

Screenshot 2023-09-28 at 07.24.38.png

Link to comment
  • Replies 8
  • Views 2.8k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Web_Solutions
Web_Solutions

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS. @media screen and (max-width: 768px) { .tweak-mobile-bar-position-top-fixed .mobile-bar-wrapper {

Posted Images

  • 2 weeks later...
Web_Solutions Level 12

Web_Solutions

Posted
Posted
2 hours ago, TomPickford said:

Hi,

Cart icon (3) next to the burger on mobile/tablet. 

Is this possible?

 

Thanks!

Tom

 

Do you want like this?

Screenshot_223.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
Web_Solutions Level 12

Web_Solutions

Posted
  • Solution
Posted
8 minutes ago, TomPickford said:

Hi,

Yes! Exactly. Or the cart icon to the left of the burger, if possible?

Thanks,

Tom

 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS. 

@media screen and (max-width: 768px) {
  .tweak-mobile-bar-position-top-fixed .mobile-bar-wrapper {
    box-sizing: border-box;
  }
  header#header[data-nc-base="header"] {
    display: flex !important;
    position: absolute !important;
    top: 5px;
    right: calc(~"6vw + 32px");
    z-index: 99999 !important;
  }
  header#header[data-nc-base="header"] .Icon--cart {
    width: 28px !important;
    height: 23px !important;
  }
  header#header[data-nc-base="header"] .site-header .Cart {
    font-size: 10px !important;
    line-height: 10px !important;
  }
  [data-nc-container="left"], [data-nc-container="center"], #secondaryNavWrapper {
    display: none !important;
  }
}

 

Screenshot_226.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • 6 months later...
Web_Solutions Level 12

Web_Solutions

Posted
Posted
1 hour ago, S_R_HRTWL said:

Hi @Web_Solutions I've used this code and it finally worked with some tweaks, however, the cart icon is disproportionately big. is there a tweak code to change its size please?

Can I see your website?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources