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 -->
        <div class="nav-main">
            <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>
          <img class="menu-button"src="menu-button-of-three-horizontal-lines.svg" width="20px" height="20px"/>

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) {

display: block;
float: right;