Mobile responsive menu placement

I am very much a novice/hobbyist and I am working on trying to create a collapsible menu system for the mobile version of a site I’ve created. I have social media icons & links to the right, and the click-button to expand the menu on the right. I would like all menu items to occur BELOW this bar but it keeps putting one up in the top bar next to the social tabs. Also, I might like to put a border around each individual drop down link but was having trouble with that as well.

function myFunction() {
    var x = document.getElementById("myTopNav");
    if (x.className === "nav") {
      x.className += " responsive";
    } else {
      x.className = "nav";
    }
  }
.nav {
  border: 1px;
  text-align: center;
  list-style: none;
  overflow: hidden;
  text-align: right;
  font-weight: bold; 
  background: linear-gradient(to left, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-top-style: solid;
  border-color: white;
  font-family: 'Unica One', Times, serif;
  font-size: 20px;
}

.navSmallScreen {
  display: none;
}

/* Style the topnav links */
.nav a {
  float: right;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: background 0.2s ease-out;
  }

/* Change color on hover */
.nav a:hover {
  background: #3271a7;
 }

.nav .icon {
  display: none;
}

.nav.responsive {
  font-size: 500px;
}

@media screen and (max-width: 600px) {

  .nav a:not(:nth-child(-n + 4)) {
    display: none;
  }

  .nav a {
    font-size: 20px;
  }

  .nav a.icon {
    float: right;
    display: block;
  }
  
  .nav.responsive {
    position: relative !important;
  }

  .nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .nav.responsive a {
    float: none;
    display: block;
    text-align: center;
    font-size: 20px;
  }

}
<script async rel="preload" src="https://kit.fontawesome.com/238db1ae8e.js" crossorigin="anonymous"></script>
<body onload="myFunction()">

<nav class="nav">
    <div class="nav social" id="myTopNav">
      <a href="https://www.facebook.com/Kidd-Machine-Works-LLC-2059943677574203/" target="_blank" class="fa fa-facebook" style="float:left"></a>
      <a href="https://www.linkedin.com/public-profile/in/nathan-kidd-2051558b?challengeId=AQEO5LOKZHaFRwAAAXTC5hm9W_EqnoNcTwV7lPalvSD3POFNPQjnhTeayNN-9TjAyOA6VC5ghl1n-wzt2L28nY2CdiN8N0Jaew&submissionId=b805a480-ebe2-3716-e664-f1db8ba06a0c" target="_blank" class="fab fa-linkedin-in" style="float:left"></a> 
      <a href="https://www.youtube.com/channel/UC99CmLebKd-gMEcEId_bKmw" target="_blank" class="fab fa-youtube" style="float:left"></a>
      <a href="https://www.instagram.com/kiddmachineworks/" target="_blank" class="fab fa-instagram" style="float:left"></a>
      <a href="/quote.html" class="navbtn" id="navquote">Quote</a>
      <a href="/photos.html" class="navbtn">Photos</a>
      <a href="/machines.html" class="navbtn">Machines</a>
      <a href="/store.html" class="navbtn">Automative</a>
      <a href="/index.html" class="navbtn currentpage">Home</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
    </nav>
 </body>

Thanks for your help!

66 thoughts on “Mobile responsive menu placement”

Leave a Comment