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/
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;
}
}
For the last 4 hours i am trying to get an image scaled when the browser resizes. The website uses bootstrap and the image is situated in the navbar-brand part. I know the navbar-brand part is normally used for a logo, but in this situation there is a bunch of text under the logo which is part of the image.
Now what i like to accomplish is to scale this image when the browser resizes. I have tried a bunch of different css option without any success.
My latest:
.navbar-brand {
max-height: 500px;
}
.navbar-brand img
{
max-height: 100%;
height: auto;
width: auto;
}
I could use some fresh input ?
As you mentioned in comments, the image will take certain percentage (31% in your case) of the navbar width. You can set width as percentage to div.navbar-header which is the wrapper of img.navbar-brand. Media query is added to make the added style compliance with Bootstrap navbar responsive rules.
#media (min-width: 768px) {
.container-fluid>.navbar-header,
.container>.navbar-header {
width: 31%; /*31% as you mentioned in comments*/
}
img.navbar-brand {
width: auto;
height: auto;
max-height: 500px;
max-width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" class="navbar-brand">
</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>
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>
My Top NavBar using bootstrap it's fine on desktop but when I browser my website using my Mobile the navbar links appear stacked vertically, instead of horizontal, why is this happening? any clue?
I am using bootstrap, here is my code:
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
body {
background: black url(Images/image.png) no-repeat center center;
height: 100vh;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.navBarLinks {
color: white;
}
.navBarLinks:hover {
color: black;
}
.body-content {} .dl-horizontal dt {
white-space: normal;
}
input,
select,
textarea {
max-width: 280px;
}
<ul class="nav nav-justified navbar-inverse">
<li><a class="navBarLinks">Stuff1</a>
</li>
<li><a class="navBarLinks">Stuff2</a>
</li>
<li><a class="navBarLinks">Stuff3</a>
</li>
<li><a class="navBarLinks">Stuff4</a>
</li>
<li><a class="navBarLinks">Stuff5</a>
</li>
</ul>
//more stuff not relevant
Thank you in advance!
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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><a class="navBarLinks">Stuff1</a></li>
<li><a class="navBarLinks">Stuff2</a></li>
<li><a class="navBarLinks">Stuff3</a></li>
<li><a class="navBarLinks">Stuff4</a></li>
<li><a class="navBarLinks">Stuff5</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
This is a basic example of what I was talking about...using bootstrap example.
https://getbootstrap.com/examples/navbar/
When you "Run code snippet" open it up using the full page button and then shrink browser to get a better idea.
I'm using the Boostrap's navbar, inside which there is an image brand (responsive) and some text (menu items). I would like to center the text within the div, but I don't know how: if I center the text in the CSS, there is more space between the left corner of the monitor and the "Home" and and less space between the last "Link" in the right and the right corner in the monitor. It's as if my code takes the div size, subtracts the image size and center the text in the remaining space.
I thought about putting a negative left margin, but because the image is responsive I don't know what value to give.
Can you help me?
http://jsfiddle.net/a001dxn6/2/
HTML
<nav class="navbar navbar-default 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="#"><img src="official_logo.png" /></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">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Specialità <span class="caret"></span>
<ul class="dropdown-menu">
<li>
</li>
<li>La pizza napoletana</li>
<li>Le specialità della casa</li>
</ul>
</li>
<li>Menu</li>
<li>Eventi</li>
<li>Gallery</li>
<li>Contatti</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-default {
background-color: transparent;
border-color: darkorange;
text-align: center;
}
.navbar-brand > img {
max-height: 100%;
max-width: 100%;
}
[fixed] Just add CSS: .navbar-brand { position: fixed; left: 1vw; }
can't really test with the fiddle, since there's no image.
have you tried removing text-aling: center from .navbar classes
and adding:
.dropdown, .dropdown-menu{
text-align: center;
}
? let me know if it works.