Ausrichten eines Bildes mit einem Hamburger-Menü

Question

Ich versuche, ein Bild und ein Hamburger-Menü innerhalb der Kopfzeile ausgerichtet zu haben. Wenn Sie darauf klicken, erscheint die Liste am unteren Rand des Bildes in einer horizontalen Linie.

Aber stattdessen listet es vertikal auf der rechten Seite des Bildes. Wie kann ich das beheben? Sollte ich aber meine Liste und img innerhalb verschiedener divs sein?

html

<header> 
<img src="images/ace_in_the_hole.png" alt="Ace in the Hole Weekend Marathon Logo"> 
<ul class="topnav" id="myTopnav"> 
    <li><a href="#about">About</a></li> 
    <li><a href="#courseinfo">Course Information</a></li> 
    <li><a href="#register">Registration</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li class="icon"> 
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
</li> 
</ul> 
</header> 

css

img { 
    width: 50%; 
    height: 50%; 
    float: none; 
} 

header { 
    padding-bottom: 2em; 
} 

/* Remove margins and padding from the list*/ 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: white; 
} 

/* Float the list items side by side */ 
ul.topnav li {float: left;} 

/* Style the links inside the list items */ 
ul.topnav li a { 
    display: inline-block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 

/* Change background color of links on hover */ 
ul.topnav li a:hover {background-color: lightgray;} 

/* Hide the list item that contains the link that should open and close the topnav on small screens */ 
ul.topnav li.icon {display: none;} 

/* When the screen is less than 680 pixels wide, hide all list items. Show the list item that contains the link to open and close the topnav (li.icon) */ 
@media screen and (max-width:680px) { 
    img{ 
     float: left; 
     height: 5em; 
    } 
    ul.topnav li {display: none;} 
    ul.topnav li.icon { 
     float: right; 
     display: inline-block; 
    } 
} 

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */ 
@media screen and (max-width:680px) { 
    ul.topnav.responsive {position: relative;} 
    ul.topnav.responsive li.icon { 
     position: absolute; 
     top: 0; 
     right: 0; 
    } 
    ul.topnav.responsive li:not(:last-child) { 
     margin-top: 6em; 
     display: inline-block; 
    } 
    ul.topnav.responsive li a { 
     display: inline-block; 
    } 
} 

Javascript

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ 
function myFunction() { 
var x = document.getElementById("myTopnav"); 
if (x.className === "topnav") { 
    x.className += " responsive"; 
} else { 
    x.className = "topnav"; 
} 
} 

Answer 1

Was war ich am Ende tat ich das Bild als der erst li hinzugefügt.

<li><img src="images/ace_in_the_hole.png" alt="Ace in the Hole Weekend Marathon Logo"></li> 
<li><a href="#about">About</a></li> 
<li><a href="#courseinfo">Course Information</a></li> 
<li><a href="#register">Registration</a></li> 
<li><a href="#contact">Contact</a></li> 
<li class="icon"> 

Dann in CSS habe ich das erste Kind hinzugefügt.

@media screen and (max-width:680px) { 
ul.topnav li:not(:first-child) {display: none;} 
} 

Auf diese Weise wird das Bild in der gleichen Zeile mit dem Hambuger Menü in Mobile angezeigt. Aber wenn Sie zur Desktopansicht gehen, sehen Sie den IMG als Kopfzeile mit dem darunter liegenden Nav.

Jetzt ist mein Problem, das Nav in der mobilen Ansicht horizontal zu machen, wenn der Benutzer klickt, um das versteckte Menü zu sehen.