汉堡菜单与徽标图像位于同一顶部导航栏上

Question

So after days of researching and meddling around, I simply can't seem to wrap my head around this concept.

What I'm trying to accomplish is to have a navigation bar at the top of the page with three components:

• An Image (Logo1) on the left hand side of the top navigation bar.
• An Image (Logo2) in the center of the navigation bar.
• ..and finally, a hamburger menu on the very right, that slides down the whole page with opacity, and with link items to navigate through out the site.

Here is how I was attempting to show all of these

 function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; } 

 li{ text-decoration: none; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 0px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } header{ width:100%; background:#1d1f20; height:60px; line-height:60px; } @media screen and (max-height: 450px) { .overlay {overflow-y: auto;} .overlay a {font-size: 20px} .overlay .closebtn { font-size: 80%; top: 15px; right: 35px; } } 

 <header> <div> <img src="" width="50px" height="30px"/> <img style="margin-left: 620px;" src="" width="50px" height="30px" /> <span style="font-size:30px;cursor:pointer; float: left;" onclick="openNav()">&#9776;</span> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Page1</a></li> <li><a href="#">Page2</a> <ul> <li><a href="#">Page3</a></li> <li><a href="#">Page4</a></li> <li><a href="#">Page5</a></li> </ul> </li> <li><a href="#">Page6</a> <ul> <li><a href="#">Page7</a></li> </ul> </li> <li><a href="#">Page8</a> <ul> <li><a href="#">Page9</a></li> <li><a href="#">Page10</a></li> </ul> </li> <li><a href="#">Page11</a></li> </ul> </div> </div> </div> </header> 

Any Help or guidence would be very much appreciated. I'm still learning! :) Thank you!

Answer 1

your hamburger icon is floated to the left. just change it to float:right;

 function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; } 

 span{ float: right !important; color: white; } li{ text-decoration: none; } .overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-y: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 0px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } header{ width:100%; background:#1d1f20; height:60px; line-height:60px; } @media screen and (max-height: 450px) { .overlay {overflow-y: auto;} .overlay a {font-size: 20px} .overlay .closebtn { font-size: 80%; top: 15px; right: 35px; } } 

 <header> <div> <img src="" width="50px" height="30px"/> <img style="margin-left: 620px;" src="" width="50px" height="30px" /> <span style="font-size:30px;cursor:pointer; float: left;" onclick="openNav()">&#9776;</span> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Page1</a></li> <li><a href="#">Page2</a> <ul> <li><a href="#">Page3</a></li> <li><a href="#">Page4</a></li> <li><a href="#">Page5</a></li> </ul> </li> <li><a href="#">Page6</a> <ul> <li><a href="#">Page7</a></li> </ul> </li> <li><a href="#">Page8</a> <ul> <li><a href="#">Page9</a></li> <li><a href="#">Page10</a></li> </ul> </li> <li><a href="#">Page11</a></li> </ul> </div> </div> </div> </header>