Jump to content

Move nav links, account icon, and cart icon to the right side

Recommended Posts

I'm working on my first client website and seem to have designed myself into a corner. I was able to add search to the header (haven't styled it yet) and display an icon for login, but now I need to move the nav over to the right - just before the account and cart icons. I didn't realize the SS header layout options were so limited. Oops.

I've tried a few options I found in forum search results, but they don't play nicely with the other css I've already added, and I'm not super familiar with flex. 

This is the mockup I'm trying to recreate:

image.thumb.png.7ac5a4e473fb610d218bd0e559e476f4.png

 

(I'm planning to use Will Myers' secondary nav for the product links in the blue bar.) 

Help, please?

https://j-berens-pottery-demo.squarespace.com/

password: pottery

Link to comment

@ovationcreative Hi! You can add the following code in Website > Pages > Website Tools > Custom CSS to display your header layout like the mockup image you shared.

@media screen and (min-width: 1025px) {
#header .header-display-desktop {
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
}

#header .header-search-bar {
    margin: 0 !important;
    order: 1 !important;
    margin-right: auto !important;
}

#header .header-title-nav-wrapper {
    display: flex;
    flex-wrap: nowrap;
    flex: unset !important;
    justify-content: center !important;
    align-items: center !important;
    flex-grow: 1 !important;
    order: 2 !important;
}

#header .header-title {
    width: unset !important;
    order: 1 !important;
    text-align: center;
    flex: 1 !important;
}

#header .header-nav {
    width: unset !important;
    flex: unset !important;
    order: 2 !important;
    margin-right: 20px;
}

#header .header-actions {
    width: unset !important;
    order: 3 !important;
    margin-left: auto !important;
}

#header .header-nav-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* add spacing and border to header menu items */
#header .header-nav-list .header-nav-item:not(:last-child) {
    border-right: 1px solid #e3ccbe;
    margin-right: 1vw !important;
    padding-right: 1vw !important;
}

#header .sqs-search-ui-button-wrapper.color-dark .search-input {
    border: 1px solid #e3ccbe !important;
}
}  

Good luck with your first client website!

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@ovationcreative Hi! The code in my previous comment was only for the desktop version.

For the mobile version you can add this code

@media screen and (max-width: 1024px) {
.header-display-mobile .header-search-bar {
    display: none;
}

.mobile-header-search-bar {
    max-width: 90vw !important;
    margin: 0 auto;
}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.