How do I make my navbar thinner?
Question
Does anyone know how to change the navbar such that there's less white space above/below the text. I already tried creating a negative buffer but that didn't seem to work.
Also if anybody knows how to change the navbar to a button(as often mobile sites have) so that it doesn't take up the entire height of the page that would be useful.
.navbar-nav>li { float: none; } .navbar-default { background-color: rgba(255, 255, 255, 0); border-width: 0px; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: rgba(150, 155, 155, ); } .navbar { margin-bottom: 0 !important; }
<meta content="width=device-width, initial-scale=1" name="viewport"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> <link href="Calums2.css" rel="stylesheet"> <link href="navbar.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <body> <div class="list" style="Position: absolute; top: 0px; left:0px;"> <div class="navbar navbar-default"> <nav class="navbar navbar-default"> <ul class="nav nav-justified navbar-nav"> <li><a href="Home.html"><h2>Home</h2></a></li> <li><a href="team.html"><h2>Team</h2></a></li> <li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li> <li><a href="Blog.html"><h2>Blog</h2></a></li> <li><a href="Expeditions.html"><h2>Expeditions</h2></a></li> </ul> </div> </nav> <style> text-align:justify; </style> </div> </div> </body>
2 answers
solution1
2 2016-01-12 01:58:37
我会尝试为nav > ul设置一个CSS规则，其中包含顶部/底部边距和/或填充设置，从0开始（如果有效果），然后将其更改为您喜欢的值。
solution2
2 ACCPTED 2016-01-12 02:04:10
This will do it.
ul.nav li a>h2 {
margin-top: 0;
margin-bottom: 0;
}
Here's a fiddle: https://jsfiddle.net/ypfhs1gn/1/
Also, to fix your HTML:
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="Home.html"><h2>Home</h2></a></li>
<li><a href="team.html"><h2>Team</h2></a></li>
<li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
<li><a href="Blog.html"><h2>Blog</h2></a></li>
<li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
</ul>
</nav>
</div>
</div>
UPDATE : Additionally, here's that fiddle updated to get you that menu button: https://jsfiddle.net/ypfhs1gn/2/
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-justified navbar-nav">
<li><a href="Home.html"><h2>Home</h2></a></li>
<li><a href="team.html"><h2>Team</h2></a></li>
<li><a href="kyrgyzstan.html"><h2>Kyrgyzstan</h2></a></li>
<li><a href="Blog.html"><h2>Blog</h2></a></li>
<li><a href="Expeditions.html"><h2>Expeditions</h2></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.