Hamburger Menu on the same top nav bar as logo images

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>