Align burger menu on desktop to the left

I have customized my header on desktop version, to force burger menu from mobile to nav on desktop. 

BUT! I would really love to have the burger menu to the left, before logo. And then the social icons on the right side. 

On mobile the burger menu is to the left. And .header-burger{order:0!important;}

Is not enough. I have tried a tons of css, found in previous subjects in this forum, but I haven't found the right one. 

11 hours ago, Sidsel said:

I have customized my header on desktop version, to force burger menu from mobile to nav on desktop. 

BUT! I would really love to have the burger menu to the left, before logo. And then the social icons on the right side. 

On mobile the burger menu is to the left. And .header-burger{order:0!important;}

Is not enough. I have tried a tons of css, found in previous subjects in this forum, but I haven't found the right one. 

I would be help if you can show the current site url

On 2/8/2021 at 2:38 AM, tuanphan said:

Can you share site url? Each template will have a different solution.

On 3/20/2021 at 2:49 AM, bangank36 said:

I would be help if you can show the current site url

https://yo-studios.squarespace.com/

code: YO2021

@Sidsel Add to Design > Custom CSS

/* burger position */
@media screen and (min-width:992px) {
.header-display-desktop {
    flex-direction: row-reverse;
}
.header-title-nav-wrapper {
    justify-content: flex-end;
}
}

On 3/24/2021 at 1:52 PM, tuanphan said:

@Sidsel Add to Design > Custom CSS

/* burger position */
@media screen and (min-width:992px) {
.header-display-desktop {
    flex-direction: row-reverse;
}
.header-title-nav-wrapper {
    justify-content: flex-end;
}
}

 

THANKS! But, that also put the social icons to the left..... I want burger and title to the right, and socialicons to the left. I cant crack the code... 

On 3/29/2021 at 1:54 PM, Sidsel said:

THANKS! But, that also put the social icons to the left..... I want burger and title to the right, and socialicons to the left. I cant crack the code... 

Did you solve it?

13 hours ago, tuanphan said:

Did you solve it?

No. I've deleted the social icons for now, while i'm wating for my designer to finished  customized svg social icons. But maybe you have css for the customized icons, and to be placed in the right side of the desktop version header. 

I'm looking for the answer to this too! I want the Burger menu on the left and the header buttons on the right!

15 hours ago, kimmydesign said:

I'm looking for the answer to this too! I want the Burger menu on the left and the header buttons on the right!

If you share your site url, we can tweak the code for your case easier

It's not live yet, is there a way to do it before it's published?

3 hours ago, kimmydesign said:

It's not live yet, is there a way to do it before it's published?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

hi there @tuanphan i'm really struggling to force the burger icon menu on desktop on the left, whilst keeping the CTA button on the right. 

any help would be absolutely amazing thank you so much 

www.apexcoaching.uk/home

On 8/27/2024 at 2:39 AM, moonlitdesign said:

hi there @tuanphan i'm really struggling to force the burger icon menu on desktop on the left, whilst keeping the CTA button on the right. 

any help would be absolutely amazing thank you so much 

www.apexcoaching.uk/home

Try this to Website Tools > Custom CSS

@media screen and (min-width:992px) {
     /* Force burger on desktop */
  .header-burger {
    display: flex !important;
    order: 1 !important;
}

.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}

.header-nav {
    visibility: hidden !important
}
    .header-menu {
        left:unset;
        width: 25%
    }
    .header-title-nav-wrapper {
    order: 2 !important;
}

.header-actions.header-actions--right {
    order: 3 !important;
}}

28 minutes ago, tuanphan said:

Try this to Website Tools > Custom CSS

@media screen and (min-width:992px) {
     /* Force burger on desktop */
  .header-burger {
    display: flex !important;
    order: 1 !important;
}

.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}

.header-nav {
    visibility: hidden !important
}
    .header-menu {
        left:unset;
        width: 25%
    }
    .header-title-nav-wrapper {
    order: 2 !important;
}

.header-actions.header-actions--right {
    order: 3 !important;
}}

 

unbelievable thank you so much!!!!!