Jump to content

Change icon for mobile hamburger icon and close icon

Recommended Posts

  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Hi. Use this code

/* Non-active burger */
.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/605902fc028a4738b5242b8c/t/606a578bc386f915f4ca8ffa/1617581963256/acorn.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: transparent !important;
    display: block;
    width: 37px;
    height: 37px;
.burger-inner>div {
    display: none !important;
/* Burger when active */
body.header--menu-open .burger-inner:after {
	background-image: url(https://cdn.pixabay.com/photo/2018/03/11/14/09/eggs-3216877_960_720.jpg) !important;


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


This topic is now archived and is closed to further replies.

  • 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.