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

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:

(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

@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!

Awesome, thank you SO much! I'm having trouble with the mobile layout though. 

The search appears in the menu (which is what I want) so I don't need it in the header as well. Also, the cart (shopping bag) icon seems to be pushed off the right side of the screen. 

Any suggestions?

@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;
}
}

Perfect, thank you so much!

Hi Sam,

I'm doing some browser testing on this site and noticed that the header alignment gets a little wonky on larger screens. Is there a way to keep the logo centered no mater what the resolution? Right now I think it's just the size of the search bar that determines where the logo ends up. 

Screenshot is an example of what I'm talking about - it's super obvious on a page like this one where the heading below is centered. 

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

Pword: pottery

Thanks for your help!
Jamie

Nevermind. I think I may have actually fixed it myself!

It's a miracle!