Jump to content

Mobile Navigtion Help

Recommended Posts

Hello, I have forced mobile navigation on desktop as well as utilized a custom image for the hamburger icon. After you click on the hamburger it animates and creates a box around it. I need help removing the box around the icon as well as removing the animation on it. Here is the css I am using:

 

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

//custom burger icon
.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/5e2b64bc8e27aa693a1d3a87/t/5e9615590f080378416014b7/1586894169574/Hamburger-White.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    background-color: transparent !important;
    display: block;
    width: 600px;
    height: 20px;
}
.burger-inner:before {display: none;
}

 

 

After.PNG

Before (2).PNG

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.