It's pretty easy to center the links in a bootstrap navbar (see fiddle in one of the responses to similar questions, here).
How can one center the collapsed "hamburger" so that it appears in the center of the navigation bar as well?
For refernece, the relevant code is below:
<style>
#media (min-width:768px) {
/* centered navigation */
.nav.navbar-nav {
float: left;
}
.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav.navbar-nav > li {
position: relative;
right: 50%;
}
.nav.navbar-nav li {
text-align: left
}
}
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About</li>
<li>Posts</li>
<li>Recipes</li>
<li>Press</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Center "hamburger" is also pretty easy:
.navbar-header{
text-align:center;
}
.navbar-toggle {
float: none;
margin-right:0;
}
Related
I was wondering how I can ensure that section 1 and two's background colour fills the whole of the webpage like in this example. As you can see on my site, the background colour on covers half of the webpage I want the background colour for section one and two to full the whole background of that section.
I have tried using the CSS. However, this doesn't work.
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
SITE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.two {
background: #563D7C;
}
</style>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<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 navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
It looks like you are loading jQuery twice. Once in the header (in the Bootstrap links) and once in the footer, for fullpage.js. Since you already loaded it once, you don't need it the second time.
Wrapping all your content in a .container will add a 15px left and right padding to your content, unless you don't place everything in it inside .row (which compensates), as in all the Bootstrap examples.
Make sure your markup is correct and validates. I also added a small CSS:
#sections .section {
padding-top: 10vh;
}
...to compensate for the height of the navbar.
However, please note it is not recommended to have the navbar in scalable units(vh). You should just stick to Bootstrap's defaults (50px). The problem with having a fixed navigation of 10vh is it will eat up too much real estate on mobile devices in portrait mode while not being tall enough for touch events in landscape mode. So, IMHO, you should change both the top padding of the .sections and the navbar height back to ~50px (min 42px). The important part is you should use px instead of vh for navbar height.
Here it is:
$(document).ready(function() {
$('#sections').fullpage();
});
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.one {
background-color:#c00;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: 10vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<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 navbar-nav">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
</div>
Additional note:
fullpage.js takes care of the fullpage thing for you. However, I happen to believe this is something CSS is capable of doing without any js, using, in principle:
.section {
min-height: 100vh;
}
...and probably flexbox to center align or distribute children nicely.
But, by using fullpage.js, you don't need to do it via CSS.
I'm trying to remove the bootstrap whitespace between my menu and the following section. My menu HTML is:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="navbar-brand">
<li><img src="{% static 'img/apps-png.png' %}" width="150px" alt="appsrfun logo" /></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Mobile Apps</li>
<li>Android</li>
<li>Apple</li>
<li>Download</li>
<li>Tags</li>
</ul>
</div>
</div><!-- .container -->
</nav>
If I inspect each element the bottom border, padding and margin are all set to 0px. There is a mysterious white space between the end of <div class="collapse navbar-collapse" id="myNavbar"> and the end of <ul class="nav navbar-nav">. The former has a shows a height of 106px while the latter shows 100px but neither has border, margin or padding. How do I align them?
Thanks
EDIT
I've included my CSS to remove the bootstrap standard margins and padding
/* Navbar */
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar .nav > li > a:link, .navbar .nav > li > a:visited {
color: #f7931e;
height: 100px;
padding-top: 40px;
margin-bottom: 0px;
}
.navbar .nav > li > a:hover, .navbar .nav > li > a:active {
background-color: #f7931e;
color: #ffffff;
border-bottom: 6px solid #ffff01;
}
.navbar {
margin-bottom: 0px;
padding-bottom: 0px;
}
.navbar-brand {
list-style-type: none;
margin-bottom: 0px;
}
.navbar-default {
background-color: transparent;
}
Probrably it has to do with the vertical-align. try setting vertical-align:middle to .navbar .navbar-nav.
Edit: Usually that happens when you have elements with different vertical-align values. I don't know what are the CSS for the rest of your code but, having elementA with vertical-align:middle and elementB vertical-align:baseline.
Example:
.container{min-height:80px;width:100%;background:#333;}
.box1{background:#eee;width:40px;height:40px;display:inline-block;vertical-align:middle;}
.box2{background:red;width:100px;height:100px;display:inline-block;}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Setting vertical-align:middle to .box2, will fix the problem.
I'm new to Bootstrap and I'm trying to center the navbar both horizontally and vertically so it looks something like this but I can't seem to figure it out.
Here's the html:
<html>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" 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>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Pages</li>
<li>Features</li>
<li>Mega menu</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
and CSS:
nav {
color: #fff;
height: 112px;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}
If you want to center the links you need to apply those rules to the .navbar-nav and li classes (most likely you'll want these inside a media-query as well).
Centered Links CSS
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
.navbar.navbar-default .navbar-nav > li {
display: inline-block;
float: none
}
}
And you can use line-height to adjust the height of your links so they're vertically aligned.
Vertical Link Alignment
#media (min-width: 768px) {
.navbar.navbar-default .navbar-nav > li > a {
line-height: 4;
}
}
Working Example:
.navbar.navbar-default {
background: white;
border: 1px solid transparent
}
.navbar.navbar-default .navbar-nav.navbar-center > li > a,
.navbar.navbar-default .navbar-search > li > a {
color: #266080;
}
#media (max-width: 767px) {
.navbar.navbar-default {
padding: 15px 0;
}
.navbar.navbar-default .navbar-collapse {
margin-top: 15px;
margin-bottom: -15px;
border: 0;
box-shadow: none;
}
}
#media (min-width: 768px) {
.navbar.navbar-default {} .navbar.navbar-default .navbar-nav.navbar-center {
width: 100%;
text-align: center;
}
.navbar.navbar-default .navbar-nav.navbar-center > li {
display: inline-block;
float: none
}
.navbar.navbar-default .navbar-nav.navbar-center > li > a {
line-height: 4;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
.navbar.navbar-default .navbar-search {
position: absolute;
right: 2%;
top: 17px;
line-height: 4;
font-size: 20px;
}
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" 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>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Pages
</li>
<li>Features
</li>
<li>Mega menu
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-search">
<li><span class="glyphicon glyphicon-search"></span>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I am working with a template and the navbar has a strange movement when it fixes on top. I am using bootstrap.
Here you can see a little video with the situation: http://i.imgur.com/trrmJj7.gifv
I tried changing the color of the menu to black so it fixes also to black but it still has the same effect. Tried also in various browsers. Cant this be fixed or is it a bug?
Here is my HTML:
<div id="menu">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#menu-content">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/other/03_Logo.png"> <span>BRAND</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu-content">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Profile</li>
<li>Portfolio</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
And CSS:
#menu {
width: 100%;
position: absolute;
bottom: 0; }
#menu nav {
border: medium none;
background: black;
margin-bottom: 0px; }
#menu nav.navbar {
padding: 10px 0px;
border-radius: 0; }
#menu nav.navbar.navbar-fixed-top {
padding: 5px 0px; }
#menu nav.navbar-fixed-top {
background: black; }
#menu .navbar-brand {
padding: 15px 0px 0px 15px; }
#menu .navbar-brand img {
width: 45px;
float: left;
margin-top: -10px; }
#menu .navbar-brand span {
float: left;
display: block; }
Remove from your css, property bottom: 0 given to id #menu. Then it should work fine.
I have the following:
Basically, I want the text "Home" to begin in line with the edge of the car picture. The last nav item should end on the right´. The Navbar is placed inside of a container-fluid. All li-elements between "Home" and "Inscriptions & Contact" should be centered. How can I accomplish that?
My Code:
<nav class="navbar navbar-default text-uppercase">
<div class="container">
<!-- 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 navbar-nav">
<li class="nav-first">Home</li>
<li>Instructeurs</li>
<li>Véhicules</li>
<li>Examen & Liens</li>
<li class="nav-last">Inscriptions & Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And this is what I changed in my custom css file:
#font-face {
font-family: MyriadPro;
src: url("../fonts/MyriadPro-Regular.otf");
}
.navbar {
font-family: "MyriadPro", sans-serif;
font-size: 18px;
}
.navbar-default {
background-color: inherit !important;
border-color: none !important;
text-align: center;
}
.nav > li > a {
padding-right: 50px !important;
padding-left: 50px !important;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.active {
background-color: gray;
border-radius: 15px;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
color: #8D1917 !important;
}
You can try this using table layout (similar to btn-group-justified in Bootstrap).
CSS:
.container-fluid > .navbar-collapse,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container>.navbar-header {
margin-left: -15px;
margin-right: -15px;
}
.navbar-nav-justified {
display: table;
width: 100%;
table-layout: fixed;
}
.navbar-nav-justified > li {
display: table-cell;
vertical-align: middle;
float: none;
width: 100%;
}
CODEPEN