Hide Custom Button on Mobile Navigation

Hello! I have created a custom button that will scroll with my page but I am needing help hiding the button when I open the Mobile Navigation. Below is my code for the button: 

#book-now {
  position: fixed;
  top: 45%;
  right: 20px;
  transform-origin: 100% 0;
  z-index: 99999;
  background: #ed7818;
  color: white;
  display: inline-block;
  font-size: 15px;
  font-family: poppins;
  padding: 10px 22px;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media screen and (max-width: 960px) {
  #book-now {
    bottom: 20px;
    top: initial;
  }
}

Any suggestions to make this happen? Thank you!! 

8 hours ago, bbouras said:

Hello! I have created a custom button that will scroll with my page but I am needing help hiding the button when I open the Mobile Navigation. Below is my code for the button: 

#book-now {
  position: fixed;
  top: 45%;
  right: 20px;
  transform-origin: 100% 0;
  z-index: 99999;
  background: #ed7818;
  color: white;
  display: inline-block;
  font-size: 15px;
  font-family: poppins;
  padding: 10px 22px;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media screen and (max-width: 960px) {
  #book-now {
    bottom: 20px;
    top: initial;
  }
}

 

Any suggestions to make this happen? Thank you!! 

If you are using Squarespace 7.1 template

.header--menu-open #book-now {
	display: none !important;
}

Please respond if @bangank36's answer worked for you. If not, it may be helpful to post a link to the site. Also, I see in your code that you have a media query, so it may help to put bangank36's code inside of your media query like so

@media screen and (max-width: 960px) {
  #book-now {
    bottom: 20px;
    top: initial;
  }
  .header--menu-open #book-now {
    display: none !important;
  }
}