Burger Menu on Desktop Alignment

Site URL: https://koi-paddlefish-bb2e.squarespace.com/

Hello,

I was able to recreate the mobile burger nav on desktop using the following code:

@media only screen and (min-width: 760px) {
  	.header-burger {
      		display: flex;
		color: white;
	}
 	.header-nav {display:none}
}

However, I would like to align the burger menu just left of the social icons. No alignment techniques I have used so far have worked except for hardcoding position, which does not resize correctly. Like so:

.header-burger {
      	display: flex;
      	position: relative;
      	left: 70%;
  		color: white;
}

Any help would be great! Thanks!

Your site is private. You need to setup password & share url again. We can help easier

Woops sorry! Here is the password: HillMountainRiver3

https://koi-paddlefish-bb2e.squarespace.com/

8 hours ago, Cancid said:

Woops sorry! Here is the password: HillMountainRiver3

https://koi-paddlefish-bb2e.squarespace.com/

You want the order should be

Burger - Social icon - button?

Don't remove any code in your current code.

Add this to Design > Custom CSS

/* burger order */
@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    order: 1;
}
.header .header-burger {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}
}

Hi tuanphan, 

That does place them in the correct order, but leaves a large gap between the burger menu and the rest of the nav items. 

On another note, I would like the text of the burger menu to be left-aligned but centered on the screen. I have achieved the left align but cannot get it to center. Do you have any idea how to do this?

Thank you!