イメージをハンバーガーメニューに合わせる

Question

イメージとハンバーガーメニューをヘッダー内で整列させようとしています。クリックすると、画像の一番下にリストが水平線で表示されます。

代わりに、画像の右側に垂直方向のリストが表示されます。これをどうすれば解決できますか？私は私のリストとimgを別の部門に分けてもいいですか？私がやってしまった何を

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

私が最初にLiなどの画像を追加しました。

<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"> 

次に、CSSで最初の子を追加しました。

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

このようにして、画像はモバイルのhambugerメニューで同じ行に表示されます。しかし、あなたがデスクトップビューに行くと、下のnavでヘッダとしてのimgが表示されます。

私の問題は、ユーザーが隠しメニューを表示するためにクリックすると、モバイルビューでnavを水平にすることです。