Need help with this problem, how to insert brand logo between navigation links? And how to move link near the brand logo like this image.. And I need responsive to works great. Here is code.
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<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="navbar-brand navbar-brand-centered">Logo</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</nav>
Maybe this is what you are looking for.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<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="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<div class="navbar-brand navbar-brand-centered">Logo</div>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</div>
</nav>
Change bootstrap CSS:
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-inner {
text-align:center;
}
Thanks
https://jsfiddle.net/phg350de/4/
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<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="navbar-brand navbar-brand-centered">Logo</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<div class="row">
<div class="col-xs-0 col-sm-3 col-md-3">
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div class="col-xs-0 col-sm-3 col-md-3">
</div>
</div>
</div>
</div>
</nav>
CSS:
.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 180px;
text-align: center;
background-color: transparent;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}
Related
I would like my navbar elements to not take up the width of the whole page. I've done research to try find the best way to do this but I get a load of different solutions. I would like my navbar to have space either side, but for the page to remain at the full width, whilst also having the brand on the left and the links on the right. What is the best way to handle the width of the navbar and the spacing of its elements?
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="col-lg-12 navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" 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="#">
<span><img src="images/brand.png" width="50" height="50" alt=""></span>Logo
</a>
<div class="collapse navbar-collapse" id="navbar-collapsed">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</div>
</nav>
CSS
.navbar {
background-color: cyan;
text-align: center;
width:100%;
}
Image of what i have and want:
After suggested changes:
Is this what you want?, Open the snippet in fullscreen mode.
I have wrapped the navbar with a container class
And also added pull-right class to navbar-collapsed to push the links to right.
As the the rest of the page, wrap your content inside container-fluid
Basically container class has fixed width depending on the width of browser and
container-fluid takes full width of browser
body {}
.navbar {
background-color: cyan;
text-align: center;
width: 100%;
}
.navbar-brand {
padding:4px!important;
float:none !important;
}
.navbar-brand img {
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="col-lg-12 navigation text-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsed" 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="#">
<span><img src="https://placehold.it/100x100" width="40" height="100" alt=""></span>Logo
</a>
<div class="collapse navbar-collapse pull-right" id="navbar-collapsed">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container-fluid">
Rest of page content
</div>
I have a collapsable navbar in bootstrap that is not showing correctly when collapsed. I am moving the navbar-header (which contains a navbar-brand) to the right side with pull-right. However, adding this in seems to make the navbar that is toggled sit between the toggle button and the navbar-brand.
I would like the toggled navbar to sit below the button and the brand whenever it is open.
This is the correctly formatted version, however, the Brand is not pulled over to the right
This is what is happening when I pull the Brand over
Here is the code I am using. Bootstrap version is 3.3.6
<nav class="navbar navbar-default">
<div class="container">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="navbar-header pull-right">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
.pos-rel{ position:relative;}
.navbar-brand{position:absolute; right:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container pos-rel">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
Try this
Try this below code:
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="pull-right" id="mobile-nav">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
<div class="pull-right" id="com-nav">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function () {
setNavbarBrand();
});
$(window ).resize(function () {
setNavbarBrand();
});
function setNavbarBrand() {
if (window.innerWidth <= 768) {
$('#mobile-nav').show();
$('#com-nav').hide();
} else {
$('#mobile-nav').hide();
$('#com-nav').show();
}
}
</script>
</body>
I'm using the bootstrap navbar-toggle button and when I click on it, the content stays hidden by the next div, I'm trying to fix it but I can't see the error.
You will see I have two div.row. The second div.row is hidding the div id="navbar1" content, that is the target of the navbar-toggle button.
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default" style="height:75px;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="zzlogo.png">
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores</li>
<li>Trayectoria</li>
</ul>
</li>
<li class="dropdown">
Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes</li>
<li>Frutas y Verduras</li>
<li>Carnes</li>
<li>Lácteos</li>
</ul>
</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- THIS DIV IS NOT MOVING WHEN I CLICK ON THE NAVBAR-TOGGLE BUTTON -->
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header col-xs-5 col-sm-4 col-md-3 col-lg-3">
Administración
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-9">
<ul class="nav navbar-nav">
<li >Usuarios</li>
<li >Productos</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
Sorry for my bad english and thanks.
The problem is caused by declaring a height for the navbar (height: 75px). It's default is min-height: 50px so once the viewport is under 768px the navbar can't expand rendering the background as "invisible" if you will.
You can use padding to increase the height.
See working examples.
Example 1
.navbar.navbar-top {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 0;
border-radius: 0;
}
.navbar.navbar-bottom {
border-radius: 0;
}
.navbar-top .navbar-brand {
padding-top: 0;
margin-top: -12px;
}
#media (max-width: 767px) {
.navbar-top .navbar-collapse {
margin-top: 20px;
margin-bottom: -20px;
}
}
<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-default navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="http://placehold.it/150x75/f00">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores
</li>
<li>Trayectoria
</li>
</ul>
</li>
<li class="dropdown"> Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes
</li>
<li>Frutas y Verduras
</li>
<li>Carnes
</li>
<li>Lácteos
</li>
</ul>
</li>
<li>Contacto
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Administración
</div>
<div class="collapse navbar-collapse" id="navbar2">
<ul class="nav navbar-nav">
<li>Usuarios
</li>
<li>Productos
</li>
</ul>
</div>
</div>
</nav>
Example 2
.navbar.navbar-top {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 0;
border-radius: 0;
}
.navbar.navbar-bottom {
border-radius: 0;
}
.navbar.navbar-bottom a {
margin: 0 5px;
}
.navbar-top .navbar-brand {
padding-top: 0;
margin-top: -12px;
}
#media (max-width: 767px) {
.navbar-top .navbar-collapse {
margin-top: 20px;
margin-bottom: -20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="http://placehold.it/150x75/f00">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores
</li>
<li>Trayectoria
</li>
</ul>
</li>
<li class="dropdown"> Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes
</li>
<li>Frutas y Verduras
</li>
<li>Carnes
</li>
<li>Lácteos
</li>
</ul>
</li>
<li>Contacto
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<div class="navbar-header"> Administración
<p class="navbar-text"> Usuarios Productos
</p>
</div>
</div>
</nav>
I want my menu to be hidden and when i hover an image i would like the menu to appear. I've tried following something that i've seen here in Stackoverflow but it's not working. How do i do it only with css ?
Html:
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">Test</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
<img src="img/ea.PNG" class="img-responsive img-center" id="imgmenu">
CSS:
.navbar{
display:none !important;
}
#imgmenu:hover + .navbar{
display:block;
}
First you must place the image before the Menu , look this example (without js):
.navbar{
display:none;
margin-top: -10px;
padding-top: 10px;
position: relative;
}
#imgmenu:hover + .navbar{
display:block;
}
.navbar:hover{
display:block;
}
<div id="main-menu">
<img src="http://www.shoredreams.net/wp-content/uploads/2014/02/show-menu-icon.png" class="img-responsive img-center" width="50px" height="50px" id="imgmenu">
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">Test</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
I don't think i've worded this properly so let me elaborate i'm trying to have my side navbar collapse into a button that functions as a top button navbar so this [actually nav-pills];
but collapses into this into the header tag:
on the top with this dropbox function.
currently my code has the dropdown occur where the sidebar would be
here's the code i'm using, Ive made no custom CSS adjustments other than color changes.
<header class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<h1 class="brand">bootstrap</h1>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><!--aside-->
<aside>
<div class="collapse navbar-collapse" id="collapse">
<h4>Menu</h4>
<ul class="nav nav-pills nav-stacked">
<li>home</li>
<li>about</li>
<li>gallery</li>
<li>CV</li>
<li>link</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
hope this makes sense thanks!
found the visible and hidden classes this worked
<header class="container"><!--header-->
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<h1 class="brand">John Doe</h1>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
</div>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav visible-xs">
<li>project 01</li>
<li>project 02</li>
<li>project 03</li>
<li>About</li>
<li>link</li>
<li>Contact</li>
</ul>
</div>
</header><!--header-->
<div class="container"><!--content area-->
<div class="row">
<aside class="col-lg-3 col-md-3 col-sm-3"><!--aside-->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav nav-pills nav-stacked hidden-xs">
<h4>Works</h4>
<li>project 01</li>
<li>project 02</li>
<li>project 03</li>
<li>About</li>
<li>link</li>
<li>Contact</li>
</ul>
</div>
</aside><!--aside-->