I need to align the menu text with the bottom of the Bootstrap 3 navbar.
My code is:
<nav class="navbar navbar-default">
<div class="container">
<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>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="/assets/img/outa.png" width="120px;"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li>Saved searches</li>
<li>Settings</li>
<li>About</li>
<li>Sign In</li>
</ul>
</div>
</div>
</nav>
This centers the menu vertically in the shaded navbar. Is it possible to change this so that the menu lies 4px above the bottom of the shaded navbar area?
This should do the trick.
#myNavbar {
position: relative;
}
#myNavbar .nav {
position: absolute;
bottom: 0;
right: 0;
margin-bottom: -10px;
}
JSFiddle
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
here my logo shows down of my navbar, ¿how can i move it to my navbar and resize it?
wrong position
here is my code
Code:
<body>
<nav class="navbar navbar-inverse">
<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>
<a class="navbar-brand" href="#"><img src="images/logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class=""active><a href"#">Home</a></li>
<li>about</li>
<li>discord</li>
</div>
</nav>
</body>
Ok I have fixed the css and check the below live example.
You have to give fixed width and height to the .navbar-brand class and then just add following css to the img inside as it will cover up the whole .navbar-brand
.navbar-brand img {
width: 100%;
height: 100%;
}
Live example:
https://codepen.io/anon/pen/rvXzEg
I would like to switch the brand and the toggle button in mobile view if the viewport is small enough. On desktop viewport the brand icons shall be on the right side and the links shall be displayed normaly.
Examples:
Desktop:
+--------------------------------------------+
|Link1 Link2 BrandIcon1 BrandIcon2 |
+--------------------------------------------+
Mobile:
+----------------------------+
|[=] BrandIcon1 BrandIcon2 |
+----------------------------+
What is the easiest and cleanest way to code this?
Made a Pen: http://codepen.io/Kaito23/pen/Wxmxgm
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-toggle {
float:left;
}
.navbar-brand {
float: right;
}
<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="#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>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<ul class="visible-xs visible-xs visible-sm visible-md visible-lg nav navbar-nav navbar-right">
<li><img src="http://images.fatcow.com/icons/32/wordpress.png" /></li>
<li><img src="http://www.wbdesignideas.com/images_drf_color.png" /></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Currently the problem is that when the icons are in the navbar-collapse class they disapear. If I put them under the collapse div, they are in a
new row.
Thanks in advance
Greetings
Kaito
Let's take Bootstrap's default navbar and remove unnecessary parts.
Then change floats to the opposite direction.
And add second brand before the first one. (It's because of the float: right; property.)
Please check the result: http://codepen.io/glebkema/pen/PzLbmz
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 768px) {
.navbar-header {
float: right;
}
}
.navbar-brand {
float: right;
}
.navbar-toggle {
float: left;
margin-left: 15px;
margin-right: 0;
}
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
<a class="navbar-brand" href="#">Brand 2</a>
<a class="navbar-brand" href="#">Brand 1</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Left 1</li>
<li>Left 2</li>
<li>Left 3</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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 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>