Jump to content

Align burger menu on desktop to the left

Recommended Posts

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. 

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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... 

Link to comment
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. 

Link to comment
  • 2 years later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.