Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

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


×
×
  • Create New...