Category menu to stay in place only on mobile device

Found this code to keep the category menu in place on mobile (it does what I hoped it would do), but it screws up the sidebar category placement on desktop. Want sidebar category menu on desktop.

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
li.category-item:first-child a {
    padding-bottom: 0 !important;
}

@media screen and (max-width:640px) {
div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
}

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

You can send the URL to your website where you are facing the issue.

12 hours ago, sINK said:

(it does what I hoped it would do), but it screws up the sidebar category placement on desktop.

If you wrap the entire code in a media query it wont affect the desktop view:

@media only screen and (max-width:767px) {
  // Show category nav links 
  div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
  }
  .nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
  }
  nav.nested-category-breadcrumb {
    display: none !important;
  }
  ul.nested-category-children {
    display: none !important;
  }
  li.category-item:first-child a {
    padding-bottom: 0 !important;
  }

  div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
    padding-bottom:0px!important;
  }
}