I would like to have the Brand centered and links to the left and right of it. In the example below I would like Brand to be between projects and resume. http://jsfiddle.net/DTcHh/1432/
HTML:
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
<header class="site-header">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>blog</li>
<li>projects</li>
<li>resume</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</header>
CSS:
#media (min-width: 768px){
.navbar-nav{
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}
}
This sound a litle bit bored but if you put your brand inside of li element before project li :)
<li>projects</li>
<li><a class="navbar-brand" href="#">Brand</a></li>
<li>resume</li>
Related
I want my navbar brand to be in the middle and my nav links to be positioned on the left and right of my nav brand. Because when the screen reaches md I want the nav links to disappear and be in the burger but still have my nav brand showing at the top center.
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand"><h2>Name</h2></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-5">
<h2>Python</h2>
</li>
<li class="nav-item px-5">
<h2>Html&Css</h2>
</li>
</ul>
</div>
</div>
</nav>
I am going for this look
What I want
HTML
<h1 class="text-center">Center Navbar Brand logo</h1>
<div class="container">
<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="#navbar">
<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="http://disputebills.com"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvuVbC_1kQQsg8U63u6gWMWuA7W1Ck5t-zkw&usqp=CAU" alt="logo">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
CSS
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
/* DEMO example styles for logo image */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 7px 14px;
}
Screenshot
I'm trying to make the icon vertically centered so it would align with the rest of the nav links but I can't seem to get it to work no matter what I try.
HTML
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
<img src="img/logo.png" class="navbar-brand" href="index.html">
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav navbar-left">
<li><span class="fa fa-phone"> +62 202 555 0117</span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
CSS
nav.navbar {
padding: 12px;
}
span.fa.fa-phone {
color: #fff;
vertical-align: middle;
}
Navbar's links have padding: 15px property. So you need to apply this property to the phone number.
Make special class for this purpose. Use
<li class="phone"><span class="fa fa-phone"></span> +62 202 555 0117</li>
instead of <li><span class="fa fa-phone"> +62 202 555 0117</span></li>.
Use <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
instead of <img src="img/logo.png" class="navbar-brand" href="index.html">
The toggle-button has to use the id from <div class="collapse navbar-collapse" id="nav"> as the value of the data-target property.
Please chaeck the result. Is it what you want to achieve?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
.navbar {
padding: 12px;
}
.nav .phone {
color: #fff;
padding: 15px;
}
<nav class="navbar navbar-inverse">
<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>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav navbar-left">
<li class="phone"><span class="fa fa-phone"></span> +62 202 555 0117</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
On this bootstrap starter template:
when the browser gets narrow the navigation bar links/buttons collapse into one icon in top-right corner like this:
I would like to have this collapsed "icon" as default like on the picture above. So that the navbar links are available after the user clicks that top-right collapsed button.
How to do that?
This is the source code of the template:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
It's all in the CSS.
See this post and check out the css column.
Always Collapse Bootstrap Nav
Working Example:
.navbar .navbar-header {
float: none;
}
.navbar .navbar-toggle {
display: block;
}
.navbar .navbar-collapse.collapse {
display: none!important;
}
.navbar .navbar-nav {
float: none!important;
}
.navbar .navbar-nav > li {
float: none;
}
.navbar .navbar-collapse.collapse.in {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
I would like to have a banner above my bootstrap page. My code is below
HTML
<div class="masthead">
<img src="images/gov-header.jpg"/>
</div>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">MST</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Divisions</li>
<li>Projects</li>
<li>FAQs</li>
<li>Resources</li>
<li>Contact Us</li>
</ul>
</div><!--/.nav-collapse -->
</div>
CSS
.masthead img{
width:100%;
}
Its better as a background.
.masthead{
height://height of bg;
background-image:url("../images/gov-header.jpg");
background-repeat:no-repeat;
}
Hope this gives you some ideas. You can modify this depending on if you want to fill the whole width or just container length.
Update
You have to change
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
to
<div class="navbar navbar-inverse" role="navigation">
See the fiddle http://jsfiddle.net/NK6nh/3/
I want a header with a height of 150px which contains a navbar. The navbar should be vertically centered in the header.
HTML:
<header>
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container" style="background:yellow;">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span>
</a>
<img src="img/logo.png" class="logo" />
<nav class="nav-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav" style="display:inline-block;">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
CSS:
header {
width: 100%;
line-height: 150px;
color:red;
height: 150px;
.navbar-inner {
border:0;
border-radius: 0;
background: blue;
padding:0;
margin:0;
height: inherit;
}
}
The nav/menu/vertical list is now in the top right of the header. How do I get it to center vertically? bootstrap.css is uncustomized.
your markup was a bit messed up. Here's the styles you need and proper html
CSS:
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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/logo.png" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or check out the fiddle at: http://jsfiddle.net/TP5V8/1/
You need also to set .min-height: 0px; please see bellow:
.navbar-inner {
min-height: 0px;
}
.navbar-brand,
.navbar-nav li a {
line-height: 150px;
height: 150px;
padding-top: 0;
}
If you set .min-height: 0px; then you can choose any height you want!
Good Luck!
For Bootstrap 4, there are now spacing utilities so it's easier to change the height via padding on the nav links. This can be responsively applied only at specific breakpoints (ie: py-md-3). For example, on larger (md) screens, this nav is 120px high, then shrinks to normal height for the mobile menu. No extra CSS is needed..
<nav class="navbar navbar-fixed-top navbar-inverse bg-primary navbar-toggleable-md py-md-3">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item py-md-3">Home</li>
<li class="nav-item py-md-3">Link</li>
<li class="nav-item py-md-3">Link</li>
<li class="nav-item py-md-3">More</li>
<li class="nav-item py-md-3">Options</li>
</ul>
</div>
</nav>
Bootstrap 4 Navbar Height Demo
I believe you are using Bootstrap 3. If so, please try this code, here is the bootply
<header>
<div class="navbar navbar-static-top navbar-default">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-th-list"></span>
</a>
</div>
<div class="container" style="background:yellow;">
<a href="/">
<img src="img/logo.png" class="logo img-responsive">
</a>
<nav class="navbar-collapse collapse pull-right" style="line-height:150px; height:150px;">
<ul class="nav navbar-nav" style="display:inline-block;">
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>