I have a page (Number 2 on image).
I want to fixing the header, but the container was under the header.
I dont understand why.
The Number 1 image is an example code. There is good.
Whats wrong?
I hope someone can help me! Thanks
(Laravel 5)
Example: https://getbootstrap.com/examples/navbar-fixed-top/#
My page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<!-- Styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="http://test.dev">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
According to bootstrap documentation The fixed navbar will overlay your other content, unless you add padding to the top of the <body>.
CSS:
body{
padding:70px;
}
or
Place your content in the jumbotron container like in the image1 and remove the background-color of the jumbotron with your own css
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
In the example link you provided, the image 1, it has a container called jumbotron which has padding 60px; that is the reason the contents are not hidden under the navbar
Demo
Maybe this solution wil be helpfull
JSFIDLE
UPDATE:
Smarties way will be to add new class with row div so your bootstrap css stay untouched.
.row-withmargin{
margin-right: -15px;
margin-left: -15px;
padding-top: 70px;
}
Related
I am working on sticky footer. I have created html and css but css seems to be not working. can anyone let me know where I am going wrong?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="C:\Users\Man\Desktop\testi.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<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="#">TESTING</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Performance</li>
<li>Book Library</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
<div id="footer" class="container">
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner navbar-content-center">
<p class="text-muted credit">Testing project Martin Bean </p>
</div>
</nav>
</div>
</body>
</html>
testi.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 260px;
background-color: #fdfdfd;
}
Are you using firefox, You need to change file path like this
<link rel="stylesheet" href="file:///C:/Users/Man/Desktop/testi.css">
I'm making a website using the Bootstrap FlatUI Framework and I found something weird happening. When I use <br> tags after the nav bar it makes this weird white box.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CS:GO - Premium Betting</title>
<meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
<!-- Loading Bootstrap -->
<link href="dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="dist/css/flat-ui.min.css" rel="stylesheet">
<link href="docs/assets/css/demo.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="dist/js/vendor/html5shiv.js"></script>
<script src="dist/js/vendor/respond.min.js"></script>
<![endif]-->
<style>
html {
background-color: #485B6E;
}
.logo {
width: 300px;
}
.navbar {
height: 90px;
}
.navbar-nav {
margin-top: 35px;
}
.place {
height: 32px;
background-color: #ecf0f1;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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="glyphicon glyphicon-tasks"></span>
</button>
<a class="navbar-brand" href="#"><img class="logo" src="img/home/main_logo_complete.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 navbar-right" style="a{text-transform: uppercase;}">
<li>HOW TO PLAY</li>
<li>SUPPORT</li>
<li><img src="img/icons/sits_small.png"></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<br><br>
<div class="place"></div>
<br><br>
<div class="container">
<p>Hello</p>
</div>
<script src="dist/js/vendor/jquery.min.js"></script>
<script src="dist/js/flat-ui.min.js"></script>
<script src="docs/assets/js/application.js"></script>
</body>
</html>
Image:
That's not a "weird white box". That's your site's body color showing through where you have content not inside an element with a differently-colored background. You can eliminate the breaks, put some padding in that div (to push it below the navbar) and see basically the same thing.
.place {
...
padding-top: 150px;
overflow: hidden;
}
Demo
i created with bootstrap an "easy" navigationbar. Now the navigationbar overlay the text. I tried to give the .navbar a margin-bottom of 50px, with no result. Here is the Page and here the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seite</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/meine.css" rel="stylesheet">
</head>
<body>
<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="#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="#">Startpage4you</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Anmelden</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-2">.col-md-4</div>
<div class="col-md-8">.ccol-md-8</div>
<div class="col-md-2">.col-md-4</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
my stylesheet
.navbar{
margin-bottom: 50px;
}
Because your navigation bar has a fixed property, everything else will appear underneath it, and pushed up to the top of the page.
So you just need to add margin-top:51px to your div 'row', in order for it to be seen.
What I would do though, is put the div class row inside a container, and then apply the margin-top to the container. Then you can use that for subsequent pages.
Since you are using a fixed navbar, you need to add padding to your body just like the bootstrap docs say:
body {
padding-top: 70px;
}
http://getbootstrap.com/components/#navbar-fixed-top
I am creating a navigation bar and placed a banner below it but they are not 100% wide. I want both of them to wrap the 100% width.
HTML(header.php)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="col-md-12" style="margin-bottom: 0px;">
<nav class="navbar navigation_bar navbar-default navbar-static-top" 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="#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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="col-md-3"></div>
<div class="col-md-6">
<center>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>MENUITEM1</li>
<li>MENUITEM2</li>
<li>MENUITEM3</li>
<li>MENUITEM4</li>
<li>MENUITEM5</li>
<li>MENUITEM6</li>
<li>MENUITEM7</li>
</ul>
</center>
</div>
<div class="col-md-3"></div>
</div><!-- /.navbar-collapse !-->
</div><!-- /.container-fluid !-->
</nav>
</div>
Index.php
<?php include "header.php" ?>
<div class="col-md-12">
<img class="img-responsive" src="img/banner_1.png" width="100%">
</div>
Note: I may have added few additional classes but they are used to change the colors only, layout is not at all touched.
Also, i tried to add row class above col-md-12 but it result in scrolling page left to right and vice versa.
I am wondering how can i make the nav bar and banner 100% wide. After inspecting col-md-12 its width is 100% but i am not sure why it is not working.
Thanks in advance.
JSFiddle
col-md-12 has a default padding values....padding-left: 15px and padding-right: 15px.
If you want to remove these defaults for bootstrap, add an additional class to the same div with padding: 0.
Here's a JSFiddle: http://jsfiddle.net/v42e2/
as of Bootstrap 3.1 you can use the class container-fluid to have things stretch across the entire screen
<div class="container-fluid">
<div class="row">
//your code for nav here
</div>
</div>
I'm using Bootstrap 3 with a Bootswatch theme. Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbarcollapse" class="navbar-toggle">
<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="#">LicenseApp</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Nav 1</li>
<li>Nav 2</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="">Username</label>
<div class="col-sm-10">
<input class="form-control" name="username" type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Any ideas why I'm having so many problems? Am I missing a DIV or something?
Your form is placed under your navbar because your navbar is fixed at top.
With following css rules:
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
Therefore, either push your form more down or make navbar not fixed, for example remove navbar-fixed-top from this element:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
Therefore, it displays jsfiddle example
Or as #Jamesking56 noticed, changing navbar-fixed-top to navbar-static-top works
In Bootstrap, when using a fixed navigation header, you usually put a padding-top on the body, the same height as the header.
See here: Bootstrap docs
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.