How to move social icons and customer account link on nav bar?

Site URL: https://sundogbread.com

Hi! How do I move social icons and customer accounts to be under page navigation?

This is what it currently looks like

This is what I want the nav bar to look like

Thank you!

Add 'flex-direction: column' to the parent container. This will stack items within the flex - but you'll probably have to mess around a bit with the positioning settings to keep it all to the left.

Add to Home > Design > Custom CSS

[data-nc-container="top-left"] {
    flex-direction: column;
    align-items: flex-start;
}

Thank you! How can I tweak the css code for the top right with the button, customer account, and cart to have the button and cart on the same row and customer account under the cart?

I am hoping it could like this:

12 hours ago, sundog said:

Thank you! How can I tweak the css code for the top right with the button, customer account, and cart to have the button and cart on the same row and customer account under the cart?

I am hoping it could like this:

I answered on your other posts..

@tuanphan, I having a similar issue, where the social media icon isn't lining up with the Main Navigation links, as seen below.

Would there be a way to push the Instagram logo up to be in the same line as the Home/Blog buttons? 

website: https://pomegranate-badger-p3wd.squarespace.com/

thanks!

On 8/12/2021 at 7:33 PM, zzlogan said:

@tuanphan, I having a similar issue, where the social media icon isn't lining up with the Main Navigation links, as seen below.

 

Would there be a way to push the Instagram logo up to be in the same line as the Home/Blog buttons? 

website: https://pomegranate-badger-p3wd.squarespace.com/

thanks!

Don't remove any code & add this code

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -10px;
}

@tuanphan, this code is working well! thank you.  One question on this.. 

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100%;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -10px;
}

Would there be a way to control the buffer space from the Header Navigation and page? 

19 hours ago, zzlogan said:

@tuanphan, this code is working well! thank you.  One question on this.. 

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100%;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -10px;
}

Would there be a way to control the buffer space from the Header Navigation and page? 

Space between nav items - top of banner??

@tuanphan, I actually was looking to get space between the list of Nav items and the start of the page.  Right now the Header Nav feels to smooshed with the start of the actual Page, and I was hoping to create a distance between the two.

Would that be possible to do? with padding maybe? 

@tuanphan, hey this is working with the padding

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100%;
  	padding: 13px;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -23px;
}

On 8/18/2021 at 8:29 PM, zzlogan said:

@tuanphan, hey this is working with the padding

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100%;
  	padding: 13px;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -23px;
}

  

Hi.

Sorry for the delay. Do you still need help?