Jump to content

Need code to for hamburger menu icon

Recommended Posts

  • Replies 9
  • Views 580
  • Created
  • Last Reply

Top Posters In This Topic

Hi. You want to change "menu" text to a burger icon? Add to Design > Custom CSS

a.header-nav-folder-title:before {
    content: "\e030";
    visibility: visible;
    font-family: 'squarespace-ui-font';
    font-size: 30px;
}
a.header-nav-folder-title {
    visibility: hidden;
}

 

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
  • 2 months later...
On 9/17/2022 at 4:05 AM, kaydotjpg said:

@tuanphan I just used your code above and it worked great. Is there a way to customize color and weight of the icon? Thanks 

Just add color/font-weight

a.header-nav-folder-title:before {
    content: "\e030";
    visibility: visible;
    font-family: 'squarespace-ui-font';
    font-size: 30px;
	color: red;
	font-weight: bold;
}

 

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
11 hours ago, kaydotjpg said:

thank you @tuanphan! Another question, the hamburger menu is showing up closer to the center than I'd like. Is there a way to scoot the hamburger menu more to the right, without having the drop down menu cut off? 

Screen Shot 2022-09-20 at 8.30.28 AM.png

What is your site? Above site, burger is fine

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 9/21/2022 at 7:55 PM, kaydotjpg said:

@tuanphan site: https://lute-accordion-9chb.squarespace.com/

password is: hello 

I would like the burger icon to be closer to the right hand side

The site url doesn't exist. Can you check it again?

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
12 hours ago, kaydotjpg said:

@tuanphan sorry about that! 

website: contrabass-mayflower-5yeb.squarespace.com

password: isle

Edit :before to :after in this code

a.header-nav-folder-title:before {
    content: "\e030";
    visibility: visible;
    font-family: 'squarespace-ui-font';
    font-size: 50px;
    color: #000;
    font-weight: thin;
}

(also, font-weight: thin; doesnt exist, try change thin to number 300)

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

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.