Navigation Bar has two problems flex-direction and display

Hello! I was trying to make this in code and I really need help. I wrote the html and css for a navigation bar and here I have two problems. First, I need to put another navigation bar with social media icons right above this one, I thought of using flex box but it doesn’t work because one appears next to the other instead of above. The second problem is that to be responsive, I need for screen sizes of less than 768px to see the navigation bar as a dropdown menu, for this I used flex-direction: column, but what happens is that both navigation bars the horizontal and dropdown appear with a screen size of less than 768, and then in fullsize screen I cannot see anyone of them. I hope this is clear enough and that someone can help me. Thank you.

<!-- Navigation -->
      <nav>
        <h1><strong>TITLE</strong></h1>
        <div class="nav-main">
          <ul>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#photos">Photos</a></li>
            <li><a href="#travel">Travel</a></li>
            <li><a href="#events">Events</a></li>
            <li><a href="#aboutMe">About Me</a></li>
            <li><a href="#connect">Connect</a></li>
          </ul>
        </div>
        <div>
          <img class="menu-button"src="menu-button-of-three-horizontal-lines.svg" width="20px" height="20px"/>
        </div>
      </nav>

nav {
margin: 0;
padding: 20px 0;
color: #101820;
}

nav h1 {
font-family: Helvetica, sans-serif;
font-size: 1.875rem;
padding-left: 50px;
}

nav ul {
list-style-type: none;
font-family: Helvetica, sans-serif;
font-size: 1rem;
float: right;
margin-bottom: 0.75rem;
}

nav li {
display: inline-block;
width: 100px;
text-align: center;
}

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

.menu-button{
display: block;
float: right;
}
}