Jump to content

Positioning Cart, Primary & Secondary Navigation in Foster.

Go to solution Solved by ArchMonkey,

Recommended Posts

Hello. I'm using the Foster template. I'd like to switch my navigation around so that my cart icon is to the left of my Log In option. Please see photo for example. In site styles, I have Log In in my secondary navigation. Origins, Stockists, FAQ & Contact are in my primary navigation. When I position my cart to top left in site styles, it automatically appears to the right of secondary naviagation. I hope this makes sense.

Any suggestions would be appreciated, thank you in advance.

alt text

capture.jpg.1dc11d1fbb8ee85e5848065309955d7b.jpg

Edited by coswebb
Initial Revision

One day I will work for [Brad Good][1]. [1]: https://www.bradgood.net/

Link to comment
  • Replies 19
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Hey @coswebb,

If there's no other customization to the site, the Custom CSS below should take care of it for you.

Add the following in your Design > Custom CSS entry:


[data-nc-base="header"] [data-nc-container="top-left"] [data-nc-element="cart"] {
 order: 0;
}

Hope it helps!

James

I'm a long-time developer who currently owns and runs SavvyStoreSolutions.com where I help people with their Shopify, Squarespace, and other eCommerce sites.

Link to comment
  • 10 months later...
  • 1 year later...
6 hours ago, jilldiane_ said:

hey i have a split nav but also want to have the cart icon above? any thoughts?

 

helix-marigold-76hn.squarespace.com

pw: 1234

Hi. I see cart icon next to contact item here. Can you explain in more detail your problem?

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
On 7/9/2021 at 10:31 PM, jilldiane_ said:

@tuanphan id like the cart to be above the contact item like screenshot attached. hopefully this makes more sense

Screen Shot 2021-07-09 at 08.30.43.png

Add to Design > Custom CSS

@media screen and (min-width:1025px) {
.header-actions--right .header-actions-action {
    position: absolute;
    top: -20px;
    right: 70px;
    z-index: 999;
}
}
@media screen and (min-width:1226px) and (max-width:1300px) {
.header-actions--right .header-actions-action {
    right: 75px;
}
}
@media screen and (min-width:1301px) and (max-width:1400px) {
.header-actions--right .header-actions-action {
    right: 90px;
}
}
@media screen and (min-width:1401px) and (max-width:1500px) {
.header-actions--right .header-actions-action {
    right: 100px;
}
}
@media screen and (min-width:1501px)  {
.header-actions--right .header-actions-action {
    right: 120px;
}
}

 

Edited by tuanphan

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 weeks later...
On 7/12/2021 at 5:22 AM, jilldiane_ said:

@tuanphan THANK YOU

Do you need fix these issues?

Site URL: http://helix-marigold-76hn.squarespace.com

1. (All devices – Homepage) There is a scroll bar at the bottom of the page

helix-marigold-76hn.squarespace.com-01-m

2. (Tablet – Footer) Do you want to make copyright lie on the same row?

helix-marigold-76hn.squarespace.com-02-m

3. (Mobile – Footer) Want to make footer links to 2 column? (as on tablet/Desktop)

helix-marigold-76hn.squarespace.com-03-m

4. (Tablet – Homepage) Text is so close to icon

helix-marigold-76hn.squarespace.com-04-m

5. (Mobile/Tablet – Homepage) Background image don’t show in full size

helix-marigold-76hn.squarespace.com-05-m

6. (About us) You haven’t changed SEO Title so the browser tab name still shows “About 1”

https://helix-marigold-76hn.squarespace.com/about-us

helix-marigold-76hn.squarespace.com-06-m

7. (Desktop/Tablet – land title) Content is too close to the margins

https://helix-marigold-76hnsquarespace.com/land-title

helix-marigold-76hn.squarespace.com-07-m

8. (Tablet – Homepage) Burger icon is too close to the margins

helix-marigold-76hn.squarespace.com-08-m

9. (Tablet-Homepage) Orange icon look so big, do you want to reduce the size?

 

helix-marigold-76hn.squarespace.com-02-m

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
5 hours ago, jilldiane_ said:

@tuanphan Yes i need help with the secondary menu!!! Its working in my codepen but not when i transfer the code to squarespace.. on squarespace it does not drop down on hover. 

here is the codepen: https://codepen.io/jilldiane/pen/ZEKXdpe



site: https://helix-marigold-76hn.squarespace.com/
pw: 1234

 

 

Screen Shot 2021-07-24 at 10.24.47.png

Add this code above script code you inserted.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

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

Create an account or sign in to comment

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


×
×
  • 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.