I have the following code, which seems to work if I keep both navbars static:
<html>
<head>
<link href="./static/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="./static/css/main.css" rel="stylesheet">
<link href="./static/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body >
<div class="bothnavbars">
<nav class="navbar navbar-default navbar-static-top nav1" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<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="#"></span> Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Sub menu link1</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- ./container-fluid -->
</nav>
<nav class="navbar navbar-default navbar-static-top nav2" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="#"> Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Sub menu link1</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- ./container-fluid -->
</nav>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<div class="blockcontent">
Content
</div>
</body>
</html>
The css that I have added in main.css is:
.nav1 {
margin-bottom:10;
}
.nav2 {
top:0;
}
.blockcontent{
padding-top: 180px;
}
Now, if I want to make both navbars fixed to the top, I change
<nav class="navbar navbar-default navbar-static-top nav1" role="navigation">
to
<nav class="navbar navbar-default navbar-fixed-top nav1" role="navigation">
Same for nav2. And I change the nav2 class to something like
.nav2 {
top:60;
}
Now the page looks ok, but when I shrink my browser size and click on the buttons to see the menus, the first navbars doesn't function properly. Any ideas how to fix this?
The problem you have is navbar-fixed-top declares both left and right position to 0, so in fact the second nav is overlapping the first one since it takes the whole width of the screen.
To solve it, add this code:
HTML
<div class="bothnavbars">
<div class="navbar navbar-default navbar-fixed-top nav1">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top nav2">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</div>
<div class="blockcontent">
Content
</div>
and CSS:
.nav1 {
position:fixed; top:60; width:50%; left:0; right:50% !important
}
.nav2 {
position:fixed; top:60; right:0; width:50%; left:50% !important
}
I have changed your HTML code because it has errors as well, so I have included some easy to see HTML so you can see how it works and replace as needed, you can see a Bootply sample here
For nav stacking one over the other, change the given CSS to this:
/* CSS used here will be applied after bootstrap.css */
.nav1 {
position:fixed; top:0;
}
.nav2 {
position:fixed; top:50px; background:#fc0
}
#media handheld, only screen and (max-width: 767px) {
.nav1, .nav2{position:relative; top:0}
.nav2{top:-20px;}
}
See Bootply (note: the background color was added for visualization purposes, but is not needed, of course)
Related
I am currently in a situation where I have a header like so
<header class="container nav-container">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button 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>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
So it is essentially an empty header with nothing displayed. Instead, for larger screens, the main navigation is actually displayed in the footer
<footer class="footer container">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2/a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
At the moment, when I go down to mobile size, it displays the mobile nav button in the header as it should do. However, when you click on it, it expands the menu in the footer. Is there any way I can put the menu I am using in the footer to display in the header when on mobile size?
Thanks
If you don't mind duplicating the footer html in the header you can do the following (I have a visible header Nav bar in the demo, but I assume you will tweak that):
<div class="navbar navbar-inverse 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="container hidden-after-768">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="text-center">
<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 -->
<footer class="footer container hidden-before-767">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">>Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
With the CSS:
#media (min-width: 768px)
{
.hidden-after-768
{
display: none;
}
}
#media (max-width: 767px)
{
.hidden-before-767
{
display: none;
}
}
Here's a demo: http://www.bootply.com/render/4NgDES9hYq
(editable version http://www.bootply.com/4NgDES9hYq)
Note that theoretically you should just be able to do <footer class="hidden-xs hidden-sm">, and <div class="hidden-md hidden-lg"> for the header section, but I found there was a point between around 768 and 994 pixels where it showed neither the footer menu nor the hamburger button, so we were left with a dead spot with no navigation links whatsoever. That is why I created the extra #media classes.
you can do this:
<header id="header_wrapper">
<div class="container2">
<div class="header_box">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</spaenter code heren>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="main-nav" class="collapse navbar-collapse navStyle">
<ul class="nav navbar-nav" id="mainNav">
<li>></li>
<li></li>
<li></li>
<li>Logout</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
$(document).ready(function(){
if($(window).width() <= 375){
$('#navbar2').html($('#navbar').html())
$('#navbar').html('')
}
else
{
if($('#navbar2').length>1){
$('#navbar').html($('#navbar2').html())
$('#navbar2').html('')
}
}});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header class="container nav-container">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar2" 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>
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar2"></div>
</div>
</div><!-- /.container-fluid -->
</nav>
</header>
<footer class="footer container">
<div class="collapse navbar-collapse navbar-responsive-collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
<a title="Link1" href="#">Link 1</a>
</li>
<li>
<a title="Link2" href="#">Link 2</a>
</li>
<li>
<a title="Link3" href="#">Link 3</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
You can use a jquery script to move the footer menu to the header menu in mobile view.
I created a temp div in header and adding the footer menu to that div and assigning the toggle menu to that div
You can do this purely with bootstrap 'hidden-X' classes:
https://getbootstrap.com/css/#responsive-utilities
I have made a codepen with an example of a duplicated menu that hides depending on the classes you give it:
https://codepen.io/c0un7z3r0/pen/NjrPvR
The magic works as follows:
Top menu container:
<div class="navbar navbar-inverse navbar-fixed-top hidden-lg" role="navigation">
Bottom menu container:
<div class="navbar navbar-inverse navbar-fixed-bottom hidden-md hidden-sm hidden-xs" role="navigation">
note the hidden-X classes, these determine what circumstances each menu should be shown. I hope this helps!
You could also display your navigation with position: absolute or position: fixed. Just as a quick example :
.navigation {
position: absolute; // in your header
top: 0;
left: 0;
#media screen and (min-width: 40em) {
position: static; // in your footer
}
}
I would like to know how to make an image fit bootstrap navbar height (proportionally), here's a descriptive image:
Any idea?
I'm using this structure:
<nav class="navbar navbar-default">
<divclass="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
If you're simply trying to adjust the size of an image to correspond to the height of a default navbar (min-height: 50px), simply use the below CSS as a base depending on how you want the image to fit.
In this example, the image will cover it's part of the navbar completely.
See working Snippet.
body {
padding-top: 70px;
}
.navbar.navbar-inverse {
border: none;
}
.navbar .navbar-brand {
padding-top: 0px;
}
.navbar .navbar-brand img {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/350x150/f00/fff">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<img src="http://placehold.it/350x150/f00/fff" />
<h4>The Same Image At Full Scale</h4>
</div>
in a previous project of mine I also encountered some issues with this. Here is how I solved the problem:
HTML:
<nav id="myNavbar" 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="#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="index.html" class="smoothScroll"><img src="img/logo.png" ondragstart="return false;" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li>
<a>Menu Item1</a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And the CSS for it:
.navbar-fixed-top {height: 40px;}
.navbar-brand img {height: 40px;}
So setting the navbar and the logo-image to the same height (and not giving it width, thus it will be automatically adjusted) solved the problem for me with good positioning. Two possible cases:
you want a fixed navbar:
.navbar-brand img {position:fixed;right:0;top:0}
you want a header on top:
.navbar-brand img {position:absolute;right:0;top:0}
In both cases I set it to top-right corner of the site, but you can adjust that easily. So the key is: same height navbar and image, with the image positioned well. (Then margin-padding or exact position of the image can easily be set in CSS)
Hope it helped,
Andrew
EDIT: Regarding fixed navbar please check the Bootstrap documentation (it has built-in class like navbar-fixed-top and such).
There are quite a few posts here about changing the Bootstrap CSS to make the header non-responsive.
But I have two headers, only one of which I want to be non-responsive, so I don't want to change it as a class:
One header has a login form, it works fine and collapses responsively exactly how I want it to.
The other is for a logged-in user and only has one link to log out, and I want to make this non-responsive. Here's how it looks now as the browser width changes, which is obviously not ideal:
And here's the code for the header I'd like to make non-responsive:
<nav class="navbar navbar-inverse navbar-fixed-top identHeader8">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="dashboard.html">[logotype]</a>
</div>
<div id="logout_navbar">
<ul class="nav navbar-nav pull-right collapse in">
<li>
Log out
</li>
</ul>
</div>
</div>
</nav>
Thanks in advance for any help you can provide.
You can use Non-nav Links (See Docs) and place it inside the header after the navbar-brand in this example.
<p class="navbar-text">Log In</p>
You can adjust to where is needed with your own CSS rules.
See example Snippet.
body {
padding-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse 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> <a class="navbar-brand" href="#">[logotype]</a>
<p class="navbar-text">Log In
</p>
</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 navbar-right">
<li>Log out
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<img src="http://placehold.it/2050x850/ff0/fff" class="img-responsive">
I'm trying to create a pretty simple double-navbar effect with Bootstrap. The only problem I have right now is that the second/bottom navbar isn't stretching across the whole browser width. Here's my code...
<nav class="navbar navbar-fixed-top navbar-inverse">
<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" style = "line-height: 30px;">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-menu-hamburger" style="color:#fff;"></span>
</button>
<a class="navbar-brand" href="#" style = "line-height: 30px;">brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- <li>Button</li> -->
</ul>
</div><!-- /.nav-collapse -->
<!-- this is the second navbar element that never takes up the full width available-->
<div class="nav navbar-default" style="background-color: #66CCFF;">
<ul class="nav navbar-nav">
<li></li>
<li class="divider-vertical"></li>
<li></li>
<li class="divider-vertical"></li>
<li></li>
</ul>
</div>
</div><!-- /.container -->
</nav><!-- /.navbar -->
I've played with various different navbar types and css styles (e.g. width:100%), but I can't seem to figure out how to make the second navbar (i.e. the one containing the 3 glyphicons) the same width as its parent.
Really appreciate any ideas on what I might be doing wrong!
You need to use container-fluid instead of container since latter has a fixed width.
.container-fluid still contains CSS rules for padding. You may try to overwrite it using custom class.
.container-fluid.no-padding {
padding: 0;
}
.no-padding .navbar-header {
padding-left: 10px; /* Align the Brand text */
}
#media (max-width: 768px) {
.no-padding .navbar-nav {
padding-left: 10px; /* Align the icons on small screens */
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid no-padding">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="line-height: 30px;">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-menu-hamburger" style="color:#fff;"></span>
</button>
<a class="navbar-brand" href="#" style="line-height: 30px;">brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- <li>Button</li> -->
</ul>
</div>
<!-- /.nav-collapse -->
<!-- this is the second navbar element that never takes up the full width available-->
<div class="nav navbar-default" style="background-color: #66CCFF;">
<ul class="nav navbar-nav">
<li>
</li>
<li class="divider-vertical"></li>
<li>
</li>
<li class="divider-vertical"></li>
<li>
</li>
</ul>
</div>
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
.navbar > .container {
padding-left: 0;
padding-right: 0;
}
just removing the padding from container changes all the instances of container on your page.
you then want to add padding back to your navbar-header
.navbar > .container {
padding-left: 0;
padding-right: 0;
}
.navbar .navbar-header {
padding: 5px 10px;
}
I have logo on left side of navbar and menu button on right side I want to change navbar orientation such that logo come to the right side and button for menu on left side my code is,
<nav class="navbar navbar-inverse 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>
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="./Styles/img/seha1.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</div>
</div>
</nav>
I tried one thing to use style navbar pull right on the outer side of this nav tag. and on button navbar pull left it work but result in increase the width of the navbar
Hopes for your suggestions
thanks
You was right, the solution mentioned in the next link do not work for Bootstrap 3:
How to implement RTL bootstrap 4 navbar?
However, I manage to solve your problem using a custom class named navbar-rtl that will customize the CSS style of the navbar for give it a RTL appearance. I hope this can help you:
#media(min-width:768px) {
.navbar-rtl .navbar-header {
float: right;
}
}
.navbar-rtl .navbar-brand {
float: right;
}
.navbar-rtl .navbar-toggle {
float: left;
}
.navbar-rtl .navbar-nav {
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-default navbar-rtl">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
Navbar
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</div>
</div>
</nav>