TechGuy24 TechGuy24 - 23 days ago 6
CSS Question

Hamburger Menu on the same top nav bar as logo images

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

HTML:

<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>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>


Here is the CSS:

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;
}
}


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

Answer

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>