Mobile Navigtion Help

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;
}

Add to Home > Design > Custom CSS

.burger {
    outline: none !important;
}