Div Above navigation don't cover whole width of page. And how to determine height?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class='col-md-12-fluid' style="
padding-bottom: 2px;
background-color:#FF5722;
padding-top: 2px;
">
<div class='col-md-8-fluid'>
<!--recently search was here-->
<a class="navbar-brand" href="index.html"><img src="images/1.jpg" height="60px" ></a> </div>
<br>
<div class='col-md-4-fluid'>
<h3>Nepal Safety</h3>
</div>
</div>
<div class='clearfix'> </div>
<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>
</div>
Thank you in advance.Your help will be appreciated.
These are normally related to the margin for container
.container-fluid {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
You shoud redefine this class: locally or a proper css file
.container-fluid {
padding-left: 0px;
padding-right:0px;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
</div>
....
Remove the container-fluid class and replace with container-fullwidth
or you can use padding both side equal to 0
.container-fluid {
padding-left:0;
padding-right:0;
}
You use a container-fluid wich has padding at both sides.
Use the following CSS to fix this problem:
body .container-fluid {
padding-left:0;
padding-right:0;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class='col-md-12-fluid' style="
padding-bottom: 2px;
background-color:#FF5722;
padding-top: 2px;
">
<div class='col-md-8-fluid'>
<!--recently search was here-->
<a class="navbar-brand" href="index.html"></a>
</div><br>
<div class='col-md-4-fluid'>
<h3>Nepal Safety</h3>
</div></div>
<div class='clearfix'> </div>
<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>
</div>
</nav>
What also works in this case, is to replace the container-fluid with row-fluid. That gives the full width properties without padding and without modification.
<div class="row-fluid">
Related
Using Bootstrap 3.3.7
I have the following markup:
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Company Name <img src="https://via.placeholder.com/220x36">
</a>
</div>
</div>
All I'm trying to do is get the logo image to appear vertically centre inside .navbar-brand
Instead it renders like this:
I want it to render like this:
The only way I could make it look how I wanted is by applying hacky CSS:
img {
margin-top:-7.5px;
display: inline-block;
}
Fiddle is here: https://jsfiddle.net/swzj0uk0/1/
I've had a look at Vertically align a navbar-brand with bootstrap and various other posts on vertical alignment.
Some posts have suggested setting a height: attribute on .navbar. I don't understand why that would be necessary because the default navbar height is 50px and my image is only 36px high.
Please can someone help?
You could add some custom style and set display: flex and align-items: center on navbar-brand element.
.navbar-brand {
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Company Name <img src="http://via.placeholder.com/220x36">
</a>
</div>
</div>
</nav>
I'm working on my first bootstrap project and is currently setting up the navbar.
What I want: When the XS model is activated (or whats is called), I want to change the font-size of the header, change the height of the navbar and make the header align to left.
And everything must of-course scale correctly.
Is there any clever way of doing this??
<nav class="navbar navbar-default navbar-fixed-top">
<div style="text-align:center;">
<header style="font-size:48px;color:black;">
My Header
</header>
</div>
<div class="container" style="padding:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="text-transform:uppercase;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</nav>
You would need to use media queries, the Bootstrap switch points are below.The smallest 576 would be your starting point, you can reference media queries here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Bootstrap:
#media(min-width:576px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Ok, I think I've figured it out.
HTML:
<nav class="navbar navbar-xs navbar-default navbar-fixed-top" style="padding:0px;margin:0px;">
<div class="hidden-xs" style="text-align:center;">
<header style="font-size:48px;">
<a href="/" style="color:black;">
Header
</a>
</header>
</div>
<div class="visible-xs pull-left" style="margin:8px;">
<header style="font-size:28px;">
<a href="/" style="color:black;">
Header
</a>
</header>
</div>
<div class="container" style="padding:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="text-transform:uppercase;">
<li><a asp-controller="Projects">Projects</a></li>
<li><a asp-controller="Visuals">Visuals</a></li>
<li><a asp-controller="Now">Now</a></li>
<li><a asp-controller="About">About</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar {
min-height: 60px;
}
.navbar-brand {
padding: 0 15px;
height: 60px;
line-height: 60px;
}
.navbar-brand, .navbar-nav li a {
line-height: 60px;
height: 60px;
padding-top: 0;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-collapse {
max-height:60px;
}
.navbar-toggle {
margin-right:28px;;
}
Only 2 of my three icon-bars show when I resize my browser. Previous answers show that people have not put their icon-bars in the right nav tag, however I have done this and it is all correct. My website is viewable here, but here is my code for header.php too:
<nav class="navbar navbar-default" 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 id="logo">
<a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
</div>
</div>
I found this rule on your page:
span {
color: #fff;
display: block;
font-family: centrale_sans_regularregular,helvetica;
font-size: 30px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: 80;
}
from bootstrap.
The position absolute is breaking it; override position to be static or unset for span.icon-bar and it'll fix it.
You overide the bootstrap styles with your own stylesheet.
You must remove or specify your code (http://www.franhaines.co.uk/style.css) like so:
span:not(.icon-bar) {
color: #fff;
font-family: centrale_sans_regularregular, helvetica;
font-size: 30px;
z-index: 80;
position: absolute;
display: block;
top: 50%;
text-align: center;
width: 100%;
}
Same Code Works Fine For Me.
<link href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<nav class="navbar navbar-default" 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 id="logo">
<a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
</div>
</div>
Demo Here
Note: Bootstrap CSS from Here
The following code displays a navbar always on the top of the page.
I need the second container (content) to be positioned at the end of the navbar and not under it.
At the moment second container is under the navbar.
I could add some empty space on the top of the content are, but I am not sure it is a good approach.
Any idea how to solve it?
<div class="container">
<div class="row">
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
<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>
</nav>
</div>
</div>
<div class="row">
<div ng-view></div>
</div>
</div>
Updated 2018
Bootstrap 3
According to the Bootstrap docs (http://getbootstrap.com/components/#navbar-fixed-top) you should use padding-top on the body..
"The fixed navbar will overlay your other content, unless you add
padding to the top of the . Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high."
body { padding-top: 70px; }
Demo: http://www.bootply.com/Ob3Bajkv1f
Bootstrap 4
Padding is also recommended for the fixed-top Navbar in Bootstrap 4 to prevent content hiding at the top of the body. You can add custom CSS for padding-top or use the pt-5 utility class on the body tag:
<body class="pt-5"></body>
You would need some CSS like this:
body {
padding-top: 20px;
padding-bottom: 20px;
}
Or like this:
.navbar {
margin-bottom: 20px;
}
Make sure you only use what you need,
Just add margin-top: 50px; to the underlaying container.
50px has to be the height of your navbar.
I was able to solve this issue using the following code.
<div class="container">
<!-- navbar -->
<nav class="navbar navbar-default" role="navigation">
<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="#">KanbanBoard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Boards</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>User</li>
</ul>
</div>
</div>
</nav>
<!-- boards -->
<div ng-view></div>
</div>
When I click on the toggle on my mobile page, the menu pops up for a brief moment and disappears again. Only the first item remains visible.
I took the css from thebootstrapthemes and basically just changed the colors and the content of the menu.
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="top-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#home"><img src="#"></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">Home</li>
<li>Pronunciation</li>
<li>Downloads</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any advice, how I can get my menu back?
This is my site
.navbar-nav {
margin-right: 0px !important;
height: 51px;
}
The 51px height is limiting your collapsible nav to show entirely.
** Not related to your question **
When using Bootstrap don't use row outside a container div since it will cause unnecessary horizontal scrollbars to appear.
Check your HTML for this element: #home #banner .centered .row. It's showing a scrollbar on my browser.