如何使我的导航栏在左侧显示徽标
[英]how to make my nav bar responsive with logo on left side
问题描述
I've been trying for a while to make my nav bar responsive but I am unable to. 
我已经尝试了一段时间以使我的导航栏响应，但是我无法。 any help would be appreciated. 任何帮助，将不胜感激。 I need the logo to sits next to on the left when the screen is 700px in width or less (media queries) and make a sandwich icon which opens up the menu. 当屏幕的宽度小于或等于700像素（媒体查询）时，我需要将徽标放在左侧的旁边，并制作一个三明治图标以打开菜单。 I know there are other questions like this but none of them meet the standards. 我知道还有其他类似问题，但没有一个符合标准。
.logo{ margin-left: 140px; margin-top: 15px; margin-bottom:10px; height: 40px; width: 40px; float: left; } #logo1{ margin-left: 20px; margin-top: 20px; margin-bottom:10px; height: 50px; width: 150px; float: left; color: white; font-family: 'Source Sans Pro', sans-serif; } header { background: rgba(0,0,0,1); width:100%; z-index: 1000000; position: fixed; } header::after { content: ''; display: table; clear:both; } nav { display:inline-block; float: right; padding-right: 10%; } nav ul { margin: 0; padding:0 ; list-style: none; } nav li { display: inline-block; margin-left: 70px; padding-top: 28px; position: relative; } nav a{ color: white; text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: 700; } nav a:hover { color: #fff; } nav a::before { content: ''; display: block; height: 5px; width: 100%; background-color: #fff; position: absolute; top: 0; width: 0%; transition: all ease-in-out 200ms; } nav a:hover::before { width: 100%; }
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="custom.js"></script> <!--<script src="/jquery.scrollTo-2.1.2/jquery.scrollTo.js"></script>--> </head> <body> <header> <Div id="gg"><div id="header" class="container"> <img src="logo1.png" alt="logo" class="logo"> <!--<h1 id="logo1">SLAD </h1>--> <nav> <ul class="nav"> <li ><a href="#welcomesec" class="slide-section">Home</a></li> <li><a href="#about" class="slide-section">About</a></li> <li><a href="#portfolio" class="slide-section">Portfolio</a></li> <li><a href="#clientssection" class="slide-section">Clients</a></li> <li><a href="#contact" class="slide-section">Contact</a></li> </ul> </nav> </div></Div> </header>
1 个解决方案
解决方案1
0 已采纳 2018-03-04 18:53:50
you have to add this tag to your HTML 您必须将此标签添加到HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add one tag for for each of the elements you wish to display 为您要显示的每个元素添加一个标签
<div class="burguer"/>
<div class="logo/>
and display them or not depending on screen size 并根据屏幕尺寸显示或不显示
.burguer{
@media (min-width: 700) { display:none} // or change position...
}
.logo{
@media (max-width: 700) { display:none }
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.