So, by default Bootstrap show logo on left corner, but on resizing it is still on the left. I want to put it in the middle to make it nicer display.
Image of what i have:
What i have
Image of what i want to be displayed:
What i want
I have this code to display Bootstrap menu in Wordpress:
<header>
<div class="menu">
<nav class="navbar navbar-default navbar-static-top">
<div class="container" id="menu2">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1">
<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="<?php echo esc_url( home_url( '/' ) ); ?>">
<img alt="Logo" src="<?php bloginfo('template_url');?>/img/logo.png">
</a>
</div>
<div class="navbar-collapse collapse col-md-9" id="menu1">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right'));
?>
</div>
</nav>
</div>
</header>
I tried text-align:center, but it only works for links, not for logo
You can rewrite a different layout for your header with logo in the center and make use of bootstrap helper classes making visible the appropriate header. for your reference. http://getbootstrap.com/css/#responsive-utilities
Another approach is to play with offsets
http://getbootstrap.com/css/#grid-offsetting
Ok, i solved the problem by adding this:
#media (min-width:768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-brand{
display: inline-block;
float: none !important;
}
.navbar .navbar-collapse {
text-align: center;
margin: 0 auto;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
}
#media(max-width:1200px) {
.navbar-header {
text-align: center;
margin: 10px;
float: none !important;
}
}
Now the brand logo is centered when there is no space and links go down.
I also created clean Bootstrap navbar example without Wordpress for another users who want to see how it works (run and display it on full screen and resize window to see effect):
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
#media (min-width:768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-brand{
display: inline-block;
float: none !important;
}
.navbar .navbar-collapse {
text-align: center;
margin: 0 auto;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
}
#media(max-width:1200px) {
.navbar-header {
text-align: center;
margin: 10px;
float: none !important;
}
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<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>
<a class="navbar-brand" href="#">Brand</a>
</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="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</body>
</html>
Related
I've used Bootstrap 3.3.7 in my web design. It's working fine with Mobile, Desktop or Laptop. But for a tablet, I can't see three bar menu. If we take bootstrap default navbar,
<nav class="navbar navbar-default">
<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="#">Brand</a>
</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="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
It doesn't work for a tablet device. This is not only mine, you can see in Bootstrap website. When you browse on a tablet, you will notice that. Is it intentionally left or else something.
I would be very much thankful for your suggestion. I guess it will help for other who get such issue.
Thanks.
You can add some CSS rules if you want to see three bar menu on tablets. Bootstrap shows that menu for <768px.
#media (max-width: 1023px) { //1024 px for laptop
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Not a big expert in CSS and responsiveness design, I try to collapse my navbar using a media query. The issue is that for dropdown menus, the responsive design is not applied correctl : The dropdown menus are displayed like on a large desktop device.
What I want is this :
Result Expected
But the result I obtain is this :
Current result
My code is actually the following :
<nav class="navbar navbar-default">
<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"> <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</a>
</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="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
And my media query is the current one as I found googling the web :
#media (max-width: 992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Additional info : The menu is displayed well when the viewport size is under 768px.
I guess, there is something missing on my media query for handling the dropdown menu case but I don't know what it is ? Can somebody help me ?
Thanks a lot.
here is your fiddle just remove default style dropdown
jsfiddle.net/qxgy6L9b/18/
I'm trying to maintain a search bar on the right of my navbar when the menu is collapsed, but can't seem to get it just how I want it.
I want the search on the right for the full menu like this:
And for it to collapse looking like this:
The best I can achieve has the search dialog wrapping to the next line and looks horrible.
To achieve this, you'll need to take the <form> out of .navbar-collapse and use #media queries to position the search box where you want.
#media (min-width: 320px) and (max-width: 899px) {
.navbar-search {
padding: 0;
position: absolute;
top: 0;
right: 100px;
}
}
#media (min-width: 900px) {
.navbar-search {
position: absolute;
top: 0;
right: 40px;
}
}
<nav class="navbar navbar-default">
<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="#">Logo</a>
</div>
<!-- Collect the nav links and other content for toggling -->
<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 class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- Search form goes here out side of .navbar-collapse -->
<form class="navbar-form navbar-search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default hidden-xs hidden-sm">Submit</button>
</form>
</div>
<!-- /.container-fluid -->
</nav>
Here's a working codepen example for you to review. http://codepen.io/yongchuc/pen/dpxeEg
I have a question about positioning my links on navbar collapse. I want the left sided links to be displayed on one line in the collapsed menu, and the right sided links to be displayed on the next line.
Right now I can get all the links displayed on the same line using "display: inline-flex" in my css, but I don't know how to separate them.
Here is my current HTML and CSS:
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
</div>
.navbar-right {
float: right;
margin-right: -15px;
}
.collapse > .navbar-left {
display: inline-flex;
}
.collapse > .navbar-right {
display: inline-flex;
}
.navbar .navbar-nav {
float: none;
vertical-align: top;
text-align: center;
}
And a link to my jsFiddle: https://jsfiddle.net/wdeg6rko/
Any help is much appreciated!
Use a media query to contain the rules so they only apply under 768px and use inline-block against the li items and set the navbar-navs width to 100% while removing any margin so they are actually centered.
Working example Snippet.
#media (max-width: 767px) {
.navbar.navbar-default .navbar-nav {
width: 100%;
text-align: center;
margin: 0;
}
.navbar.navbar-default .navbar-right > li,
.navbar.navbar-default .navbar-left > li {
display: inline-block;
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link 3
</li>
<li>Link 4
</li>
<li>Link 5
</li>
</ul>
</div>
</nav>
</div>
As there is float: left !important; is added to .navbar-left. To override it use following css:
.nav.navbar-nav.navbar-left {
float: none !important;
}
Fiddle
I am trying to create a full background image page with a nav bar that floats on top the image.
I am getting a problem in that the navbar pushes the image down, the image is set on the background of the html element so I dont know why the navbar is having this effect.
I am just using the css straight off the bootstrap getting started page and without the navbar the image fits the entire page, with the navbar it sits above the image and pushes it down:
Css:
html{
/* This image will be displayed fullscreen */
background:url('bg.jpg') no-repeat center center;
/* Ensure the html element always takes up the full height of the browser window */
min-height:100%;
/* The Magic */
background-size:cover;
}
body {
/* Workaround for some mobile browsers */
min-height:100%;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar {
margin-top: 0px;
margin-bottom: 0px;
}
Html:
<body>
<div class="container">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link 1</li>
<li>Link 2</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<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>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
The effect that I want to end up with is an image of the entire page and the nav bar sat with the image showing under it, not pushing the image down so it starts after the navbar.
Apply the following 2 lines of CSS to the body instead of the html element:
body {
background:url('bg.jpg') no-repeat center center;
background-size:cover;
/* Workaround for some mobile browsers */
min-height:100%;
padding-top: 20px;
padding-bottom: 20px;
}
Give background to body tag.
html{
height: 100%;
width: 100%;
}
body {
/* Workaround for some mobile browsers */
min-height:100%;
padding-top: 20px;
padding-bottom: 20px;
/* This image will be displayed fullscreen */
background:url('http://www.radioviva.fm.br/images/backgrounds/bg-squares-dark.jpg') no-repeat center center;
/* Ensure the html element always takes up the full height of the browser window */
min-height:100%;
/* The Magic */
background-size:cover;
}
}
.navbar {
margin-top: 0px;
margin-bottom: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link 1</li>
<li>Link 2</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<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>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
Add your background to body - not html
body {
/* Workaround for some mobile browsers */
background: url('bg.jpg') no-repeat center center;
background-size: cover;
min-height: 100vh;
padding-top: 20px;
padding-bottom: 20px;
}
see here: http://codepen.io/anthu/full/KVeOyV/