When I resize browser nav logo and menu goes into each other

user_10812289 0
Viewed 67

I made navbar where are menu and logo next to each other so what's problem ? well when I size my browser they go into each other. In my example logo have higher z-index so menu is unseen when I size in, I need solution to this problem

#navbar ul li .a1 {
    position: fixed;
    left:0;
    padding-left:18px;
    cursor: pointer;
    color:rgb(252,227,0);
    font-size:1.2rem;
    text-decoration: none;
    transition: .5s;
}
#navbar #logo img {
    width:90px;
    height:48px;
    background: black;
    position: absolute;
    z-index: 1000;
    left:6%;
    padding-left:12px;
}
<div id="navbar">
  <div id="logo">
    <img src="https://i1.wp.com/obedparla.com/wp-content/uploads/2018/11/twenty-one-pilots-trench-logo.jpg?fit=1920%2C1080&ssl=1">
  </div>
  <ul>
    <li>
      <a href="#" class="a1">
        <i class="fa fa-bars"></i>Menu
      </a>
    </li>
  </ul>
</div>

css html
2 Answers

use left:100px; instead of left:6%; it will works

#navbar ul li .a1 {
    position: fixed;
    left:0;
    padding-left:18px;
    cursor: pointer;
    color:rgb(252,227,0);
    font-size:1.2rem;
    text-decoration: none;
    transition: .5s;
}

li{
  list-style-type: none;
}

#navbar #logo img {
    width:90px;
    height:48px;
    background: black;
    position: absolute;
    z-index: 1000;
    left:100px;
    padding-left:12px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="navbar">
 <div id="logo">
  <img src="https://i1.wp.com/obedparla.com/wp-content/uploads/2018/11/twenty-one-pilots-trench-logo.jpg?fit=1920%2C1080&ssl=1">
 </div>
 <ul>
  <li><a href="#" class="a1"><i class="fa fa-bars"></i> Menu</a></li>
 </ul>
</div>

user_61088820

Try this code 

#navbar{
    position: fixed;
    width: 100%;
    height: 100px; /*if not required dont give height*/
    display:flex;
    top: 0;
    left: 0;
}
#navbar ul li .a1 {
padding-left:18px;
cursor: pointer;
color:rgb(252,227,0);
font-size:1.2rem;
text-decoration: none;
transition: .5s;
}
#navbar #logo img {
    width:90px;
    height:48px;
    background: black;
}
user_103162310
Related