Jump to content

Change position of menu text in forced Burger menu for desktop

Go to solution Solved by Ziggy,

Recommended Posts

Can anyone help?

I've found the code for setting a fixed burger menu on the desktop, but I can't for the life of me work out how to format the text so it sits top left. At the moment it just positions itself in the middle, though I have managed to justify it left. Can anyone please help?

@tuanphan It was your code I used for the fixed burden on desktop, just wondered if you may be able to help with this issue. Thanks so much in advance

image.thumb.png.44d7f916008ad1b63e0e276edb32b6b9.png

 

 

Link to comment
  • Replies 9
  • Views 412
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Can you add and share a site wide password?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This is the code I used for the Fixed Burger Desktop:

/* Burger -logo - cart */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
/* customize menu */
nav.header-menu-nav-list {
    width: 50%;
}
.header-menu-bg.theme-bg--primary {
    width: 50%;
}
.header-menu-nav-folder[data-folder="root"] {
    overflow: hidden;
}
body:not(.header--menu-open) .header-menu {
    left: -200%;
    transition: all 0.3s;
}
.header--menu-open .header-menu {
    left: 0;
    transition: all 0.3s;
}
}

Link to comment
1 hour ago, jezpoole said:

That would give access to all the sites I have on my dashboard which I'm a little reluctant to do. Is there a workaround (sorry)

I absolutely don't want access to your account! I was asking for a site wide password which you can set in Settings -> Website -> Site Availability which gives you the ability to view an unpublished website.

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

You can try this Custom CSS, but without seeing your website I can't be sure it's the right code!

.header-menu-nav-folder-content {
  justify-content: flex-start;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy thanks so much, that's worked a treat.

Any help with reducing the line height and padding to the left? Sorry, I know that's cheeky.

I've set a password on the site now: Harrogate.

Thanks so much again.

Link to comment
On 5/3/2024 at 6:13 PM, jezpoole said:

Any help with reducing the line height and padding to the left? Sorry, I know that's cheeky.

 

What padding?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.