Place navigation UNDER logo, both on the left

Site URL: https://broccoli-semicircle-gtmg.squarespace.com/home-example-2

Hi there! I have not been able to find the option to place the navigation UNDER  the logo, keeping both on the left, like in this example: 

This is how it looks on my page:

Thank so much!!!

Hi there, sorry for late reply. Here's the url:

https://hervedaridan.squarespace.com/home

On 11/13/2021 at 7:46 AM, Carolina1205 said:

Hi there, sorry for late reply. Here's the url:

 

https://hervedaridan.squarespace.com/home

Hi,

How about Instagram? Right of header, same line with Logo

or Same line with Navigation & float right?

19 hours ago, tuanphan said:

Hi,

How about Instagram? Right of header, same line with Logo

or Same line with Navigation & float right?

Hi there! thank you so much! 

Instagram: Same line with Navigation & float right.

You are the best! 🙏

On 11/15/2021 at 6:16 AM, Carolina1205 said:

Hi there! thank you so much! 

Instagram: Same line with Navigation & float right.

You are the best! 🙏

 

 

Try adding to Design > Custom CSS

.header-title-nav-wrapper {
    flex-direction: column;
    align-items: flex-start;
}
.header-display-desktop {
    align-items: flex-end;
}
.header-nav-item a {
    line-height: 3.5em;
}

Thank you Tuanphan, it worked great!  but as you hinted, the instagram icon does not look so great on the right. Could you please code to get it on the left under the navigation bar? 

THANK YOU! 

11 hours ago, Carolina1205 said:

Thank you Tuanphan, it worked great!  but as you hinted, the instagram icon does not look so great on the right. Could you please code to get it on the left under the navigation bar? 

THANK YOU! 

 

 

Move this or?

Hi there, yeah! like this: 🙂

(I have changed the display since you took the screenshot) 

On 12/5/2021 at 4:46 AM, Carolina1205 said:

(I have changed the display since you took the screenshot) 

Don't remove any code in your current code. Add this to Design > Custom CSS

.header-display-desktop {
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start;
}
a.icon.icon--fill {
    margin-left: 0 !important;
}