Hiding Special Nav On Mobile

Hi Guys

I have used some code I have found to create a special navigation bar which scrolls along my page and sticks to the top of the browser.

I am struggling to make the bar fit on mobile (or ideally not display?)

I have tried adjusting my mobile break point to extremes but nothing seems to work.

Code pasted below and screenshots attached, any help would be greatly appreciated!

Thanks

<style>
#special-nav > div{padding-right:12%}
  #special-nav > div:last-child{padding-right:12%}
#special-nav {
  position: fixed;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-end;
  background-color:#201f1d;
  opacity:0.9;
  padding:2% 2% 2% 2%;
  width:100%;
  top:0px;
  left:0px;
  z-index:1000 !important;
  box-shadow: 4px 4px 7px rgba(0,0,0,0.4)
  }
#special-nav h3{
  color:#8b8b74 !important;
  font-family:"Poppins" !important;
  font-size:18px;
  }
  #special-nav a:hover {color:white !important; opacity:0.8;}
@media screen and (max-width:1240px) {
  #special-nav {display :none; }}
  
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(document).on('scroll', function() {
   if ($(document).scrollTop() >= 0) {
     $('#special-nav').css('display', 'flex');
   } else {
     $('#special-nav').css('display', 'none');
   }
 });
 </script>

<div id="special-nav">
    <div><h3><a href="/home#Home">Home</a></h3></div>
    <div><h3><a href="/bespoke-beds#BeSpoke Beds">BeSpoke Beds</a></h3></div>
    <div><h3><a href="/our-mattresses#Our Mattresses">Our Mattresses</a></h3></div>
    <div><h3><a href="/our-fabrics#Our Fabrics">Our Fabrics</a></h3></div>
    <div><h3><a href="/contact#Contact">Contact</a></h3></div>
</div>

Turns out this was easier than I realised.

Just needed to change this piece of code

On 11/25/2020 at 11:23 PM, SnoozySteven said:

@media screen and (max-width:1240px) {
  #special-nav {display :none; }}

to this

@media (max-width:981px) {
#special-nav {display:none!important; }}

Easy!