时间戳

首页 > 解决方案 > 当我调整浏览器导航徽标和菜单的大小时

html - 当我调整浏览器导航徽标和菜单的大小时

问题描述

我制作了导航栏，菜单和徽标在哪里相邻，有什么问题？好吧，当我调整浏览器的大小时，它们会相互连接。在我的示例中，徽标较高z-index，因此当我调整大小时看不到菜单，我需要解决这个问题

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

标签： htmlcss

解决方案

使用left:100px;而不是left:6%;它会起作用

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

推荐阅读