reduce height of navbar in bootstrap 3
Question
I am trying to reduce the size of the navbar in bootstrap. I have spent a lot of time on this and have tried doing the following things in my css file:
.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}
also:
.tnav .navbar .container { height: 28px; }
non of these changes made any difference :(
I have added my html and current CSS file and i would appreciate any help i can get.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/app.css" rel="stylesheet">
<link href="/css/common.css" rel="stylesheet">
<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
{!! Form::image('img/logo.gif', 'logo',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4 col-md-offset-4">
{!! Form::image('img/social_links.gif', 'logo',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
</div>
</div>
<div class="row">
<nav class="navbar navbar-default">
<div class="col-md-6 col-md-offset-3">
<div class="container-fluid">
</div>
</div>
</nav>
</div>
<div class="row">
<div id="carousel-fuudey" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-fuudey" data-slide-to="0" calss="active"></li>
<li data-target="#carousel-fuudey" data-slide-to="1"></li>
<li data-target="#carousel-fuudey" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner.gif" alt="banner" />
</div>
<div class="item">
<img src="img/banner.gif" alt="banner" />
</div>
<div class="item">
<img src="img/banner.gif" alt="banner" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
<p>login</p>
</div>
<div class="col-md-4">
<p>menu</p>
</div>
<div class="col-md-4">
<p>contact</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
{!! Form::image('img/gal-pic.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
<div class="row">
<div class="col-md-4">
{!! Form::image('img/left.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4">
{!! Form::image('img/middle.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
<div class="col-md-4">
{!! Form::image('img/right.gif', 'gallery',
array( 'class' => 'img-responsive' ))
!!}
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
css:
.navbar-default {
background-color: #4f0100;
border-color: #4f0100;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ecdbff;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #4f0100;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #4f0100;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
.navbar-default .navbar-toggle {
border-color: #4f0100;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #4f0100;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ecdbff;
background-color: #4f0100;
}
}
2 answers
solution1
0 ACCPTED 2015-02-19 16:12:00
Hmm, looking at your code I noticed in your html that you are not including a stylesheet named bootstrap? So I am assuming that one of the two css files is the bootstrap and by the labeling common.css looks to be it. If this is the case reverse the order of the css files. You need to include the bootstrap.css (common.css?) file before trying to override any css styles.
.navbar {min-height:32px !important}
should work.
Try adding your own class
.navClass { height:32px !important; min-height:32px !important; }
If none of that works you can always go to the bootstrap website and edit the css to your liking and just change the navbar styles. http://getbootstrap.com/customize/#navbar <-- link to navbar styles just change that height property then download the package. Or if you know less you can just change the less files yourself and compile them again with whatever changes you want.
solution2
0 2015-02-19 16:38:22
You'll need to adjust a couple items CSS:
Assuming a height of 32px, add these overrides:
.navbar{
min-height:32px;
}
.navbar-brand{
height:32px;
padding:5px 15px;
}
.navbar-nav>li>a {
padding-top: 6px;
padding-bottom: 6px;
}
Just be sure they are added after the default bootstrap css file
HTH
-Ted
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.