Project landing page nav bar responsive

I’m working on a nav bar that I am trying to make the ul nav text elements on the right slide underneath the nav bar centered with a translucent black background as seen in the attached picture. Having issues following. How do I write the media query to do this?

See the Pen Project Landing Page Aer by edward holmes (@holmedw) on CodePen.

vIDEO hERE

This will give the effect in the picture. By itself it won’t do much else though. You’ll need some javascript to hide and show it.

@media (max-width: 500px) {  /* whatever breakpoint you want */
  #nav-bar {
    position: absolute; /*   absolutely to the header   */
    width: 100%;  /*   full screen   */
    top: 100%;  /*   100% from top of header   */
    margin: 0;  /*  remove margin   */
  }
  #nav-bar li {
    display: block;  /*   stack in column  */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
  }
}

Thanks very much for this. Been trying to understand this all day. Is there any way you can try to explain where I went wrong in my coding? I tried to follow the tutorial and the fcc sample project and just couldn’t get it. Where did I go wrong?