Removed CSS is affecting my current code for forced mobile menu

Hi all,  While designing a website I used a code for my navbar that I felt like wasn't working correctly. So I decided to remove it and replace it with a forced mobile menu code instead. Problem is, my previous code is affecting my forced mobile menu code. And now it looks like the first pic:

Instead of the second pic (Another of my websites)

I know this is caused by my first code because I have tested the forced mobile menu code on three different websites with no issues. 

This is the code I removed and has seemingly broken my site:

@media (min-width: 767px) {
/* Fullwidth navigation border*/
  
// Remove Active Nav Line - Ghost //
.header-nav-item--active a {
    background-image: none !important;
}
  
.header-announcement-bar-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.header-display-desktop {
    flex-direction: column;
}
.header-title-nav-wrapper {
    flex: 0 0 100% !important;
    margin-right: auto;
    width: 100% !important;
}
nav.header-nav-list {
    display: flex;
    width: 100%;
    border-top: 2px solid;
    border-bottom: 2px solid;
}
.header-nav-item a {
    line-height: initial;
    padding-top: 15px !important;
    padding-bottom: 15px !Important;
}
.header-nav-item {
    border-left: 1px solid;
    border-right: 1px solid;
    margin: 0 !important;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-left: -1px !important;
}
    
nav.header-nav-list {
    justify-content: center !important;
    flex-wrap: nowrap;
}
nav.header-nav-list>div {
    width: 20%;
}
  
  // Cart and buttons //
.header-actions.header-actions--right {
     position: absolute;
      inset: auto 4vw 1rem auto;
      bottom: 11vh;
    }
  
  // Social icons //
    .header-actions.header-actions--left {
    position: absolute; left: 8vw; top: 3vh;
}
  
}
 

This is the code I am using now:

// Forced mobile //
.header .header-burger{display:flex}
.header-nav, .header-actions {display:none}

.header--menu-open .header-menu {
opacity: 1; visibility: visible;
}

This is also the exact code I am using in the second photo. 

My website is https://beige-parsnip-rxyj.squarespace.com/ , password: 1234

Thank you in advanced!