2nd header following first header

Site URL: https://www.kelvinrentals.com/

Hello,
so I have a couple of questions I will try to list them here as organized a possible providing screenshots.

first of all this is the website :https://www.kelvinrentals.com/
and this is the password: kelvinrentals
I have a basic plan.

Question number 1:

I made a 2nd header and it works perfectly, however I need it to move to the top of the screen and stick to it while someone is scrolling as there is a gap between it and the top of the page when they do.

Here is the code I used

in code injection:

<!-- SECONDARY MENU HTML IN SITE/PAGE HEADER -->
<div id="secondary-menu">
  <ul>
    <a href="/grip"> <li> Grip </li> </a>
    <a href="/lighting"> <li> Lighting </li> </a>
    <a href="/sound"> <li> Sound </li> </a>
    <a href="/camera"> <li> Camera </li> </a>
    <a href="/production-supplies"> <li> Production supplies </li> </a>
  </ul>
</div>

in CSS

/*STYLES FOR SECONDARY HEADER IN CUSTOM CSS WINDOW*/
#secondary-menu ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  text-align: center;

}
#secondary-menu li {
  display: inline-block;
  padding: 10px;
  text-transform: uppercase;
  font-size: 13px;
  transition: background 1s, color 1s;
    border-width: 0;
  opacity: 1;
  border: 1px solid #000000;
  border-radius: 5px;

  
}
#secondary-menu li:hover {
  background: #fff;
  color: #000;
  border-width: 0;
  opacity: 1;
  border: 1px solid #000000;
  border-radius: 5px;
}

#secondary-menu {
  background: #000;
}

#secondary-menu li {
  background: #000;
  color: #fff;
 

}

@media screen  and (max-width: 400px) {
  #secondary-menu li{
    padding: 10px;
     position: sticky;
    width: 50%;
    hight: 20%;
    z-index: 100;
    top: 0px;
  }
}

/*OPTIONAL CODE TO SET THE NAV BELOW THE HEADER*/
@media screen and (min-width: 930px) {
  #secondary-menu {
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    z-index: 999;
    top: 190px;
  }
}

1- before scrolling 


2- after scrolling

......................

Question number 2:

Now my phone view looks like this, i would like to remove it and add the list to the hamburger icon without having the list on the first header on the desktop version. ( want the 1st header list only on phone)

Thank you.

hey thank you and sorry for the late reply, I copy pasted the code in a footer lockdown and it didn't work.
can you guide me on what did i do wrong ?

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 30;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('#secondary-menu').addClass('tuan');
        }
        else {
            $('#secondary-menu').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tuan {
  	top: 0 !important;
  }
</style>

OMG IT WORKED!!!, THANK YOU SO MUCH. YOU ARE AMAZING 🤩🤩
I really appreciate your help and patience 💯.