[英]Is there a code to move the nav bar below a header graphic?
尝试将导航栏移动到标题图像下方。 当我将它移动到图像下方时，它会产生主要的空白区域，或者它会在标题图像后面消失。 我尝试了各种来源的几种不同的CSS技巧，试着得到我想要的东西。 正如我所说，它只是移动到底部或停留在顶部或消失在标题图像后面。
body { padding: 0; margin: 0; background: #f2f6e9; } /*--- navigation bar ---*/ .navbar { background: #6ab446; } .nav-link, .navbar-brand { color: #fff; cursor: pointer; } .nav-link { margin-right: 1em !important; } .nav-link:hover { color: #000; } .navbar-collapse { justify-content: flex-end; } /*--- header ---*/ .header { background-image: url('images/logo2w5.png'); background-size: contain; background-position: top center; position: relative; background-repeat:no-repeat; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler navbar-dark" type="button" data toggle="collapse" data-target="#main-navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="main-navigation"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <header class="page-header header container-fluid"> </header>
上面的代码只是将导航栏放在标题图像的顶部。
我希望这个示例有所帮助
body { padding: 0; margin: 0; background: #f2f6e9; } /*--- navigation bar ---*/ .navbar { background: #6ab446; } .nav-link, .navbar-brand { color: #fff; cursor: pointer; } .nav-link { margin-right: 1em !important; } .nav-link:hover { color: #000; } .navbar-collapse { justify-content: flex-end; } /*--- header ---*/ .header { background-image: url('images/logo2w5.png'); background-size: contain; background-position: top center; position: relative; background-repeat:no-repeat; padding: 0 !important; margin: 0 !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <header class="page-header header container-fluid"> <img src="https://via.placeholder.com/1500x400" alt="img" width="100%" /> </header> <nav class="navbar navbar-expand-md"> <a class="navbar-brand" href="#">Logo</a> <button class="navbar-toggler navbar-dark" type="button" data toggle="collapse" data-target="#main-navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="main-navigation"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> </body> </html>
使用 header 创建垂直导航栏，并根据图形向右形成
[英]Create vertical nav bar with both header and form to right as per graphic
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.