why is my navbar not full width - html

I have a simple navbar, but it refuses to go the uill 12 col width.
<!--Mobile NAV BAR ROW-->
<div class="row row-nomargin">
<div class="col-md-8 col-md-offset-2">
<nav class="navbar navbar-default navbar-left">
<!-- 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>
</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">
<li class="active">Home</li>
<li>Gallery</li>
<li>Pricing</li>
<li>About us</li>
<li>Contact us</li>
</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
Its priob something i've overwritten in css (i shouldn't do that) but i cant see what
.navbar .nav > li > a {
color: white;
}
.navbar-default {
/*Overwrites bootstrap css*/
box-shadow:
border: 0;
margin-bottom:0;
/*background-image: url('../img/navbarbackground1.png');*/
font-family: 'Cooper Black';
background-color: rgb(1,165,228);
/*background-color: rgba(0,0,0,0.0);*/
/*border: 2px dashed #FFFFFF;box-shadow: 0 0 0 0px #A0785A, 2px 0px 20px 0px;*/
}
.navbar-fixed-bottom {
/*Overwrites bootstrap css*/
background-image: url("../img/backgroundImage.jpg");
}
.nav-tabs{
/*MFOHARE Specific css*/
right: 0px;
color: white;
}
.row-nomargin{
margin: 0px;
}
Any ideas whats goimng on here - my navbar is only as wide as the links on it.

You have the class navbar-left on your nav element. navbar-left does one thing:
.navbar-left {
float: left !important;
}
So your entire nav will float left and shrink to fit the items within it. You can probably just remove that class and it will fix your issue.

Related

Bootstrap Navbar Collapse not working when navbar position is absolute

When using position: absolute; the navbar collapse does not work properly. When expanding the menu, the other content is not moved down anymore. Also, the button to expand and collapse is not visible (which is why I have made it gray) and does not appear in the correct position.
HTML code for the navbar:
<nav class="bootstrap-iso navbar navbar-default navbar-absolute">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="bootstrap-iso 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="#">DEMO</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" id="navbar-right">
<li>Home</li>
<li>Bruid</li>
<li>Bruidegom</li>
<li>De Winkel</li>
<li>Blog</li>
<li>Contact</li>
<li><button class="btn" id="afspraak">AFSPRAAK MAKEN</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
navbar-right li {
font-family: Arial;
text-transform: uppercase;
font-weight: bold;
}
#afspraak {
margin-top: 5%;
background-color: #f5758e;
font-family: Arial;
text-transform: uppercase;
font-weight: bold;
color: white;
}
#navbar-right a {
color: white;
}
.navbar-default .navbar-brand {
color: white !important;
font-size: 36px !important;
}
.navbar-default {
background: transparent !important;
border: none !important;
position: absolute;
}
.navbar-toggle {
background-color: grey !important;
}
Many thanks in advance for your help!
YoungStarDC it happens to the best of us...check the first line of the navbar class. You need to add a '<' everything that's open has to be closed and everything that's closed has to be opened. The button will appear when you change the browsers window size once you do that.
<nav class="bootstrap-iso navbar navbar-default navbar-absolute"></nav>
P.S. Bootstraps navbar-collapse only collapses the navbar and shows the button when the screen is too small to hold the navbar

Bootstrap HTML fit alert into navbar

This is probably a simple CSS trick. I need an alert to fit inside the navbar after the home icon between the other icons which are pull-right.
The alert needs to fit inside the spot given.
Examples:
Desktop
Mobile
Current appearance:
CSS that affects the navbar:
.navbar {
margin-bottom: 0;
background-color: #396B99;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #396B99 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
Current navbar HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<!-- Where the alert should go? -->
<div class="alert alert-info">
<strong>Service Alert</strong> There is something wrong, and we need to alert you about it.
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<li>products</li>
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>
Hope this helps, threw together a quick bootstrap menu with an alert in it
.alert-float{
height: auto;
max-width: 500px;
top: 0;
margin: 0 auto;
}
/*the following just removes mobile scaling so I can properly show you the alert*/
.navbar-collapse.collapse{
display: block !important;
}
.navbar-nav>li, .navbar-nav{
float: left !important;
}
.navbar-nav.navbar-right:last-child{
margin-right: -15px !important;
}
.navbar-right{
float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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>
</ul>
<div class="alert-float" style=" position: absolute; top: 0; left: 130px; right: 30px; z-index: 9999;width: 65%">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Test
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
You just need to tweak the CSS stylign to get it to fit where you want. Mainly the display appearance should be inline-block.
After that, you might want to set max-widths so it doesn't spill over to the nav. Some media queries might be needed also.
Or try floating it left, and see what that looks like.
Can you make a JSFiddle?
JavaScript might work. Just add another link and hide it. Am using an error in this example for when the alert is shown.
<li>Alert!</li>
Example of JavaScript:
$("#alert").hide();
var error == false;
if (error == true){
$("#alert").show();
}
You can add the alert where you put your comment, using the navbar-text class
You can see it here in action
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<p class="navbar-text">Put you alert HERE with class navbar-text</p>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<!--<li>PORTFOLIO</li>-->
<li>products</li>
<!--<li class="dropdown">
<a class="dropbtn" data-toggle="dropdown" href="">
products
<span class="caret"></span>
</a>
<ul style="list-style:none !important; padding:0px 0px !important;" class="dropdown-content">
<li>CPR-Web</li>
<li>SC-Tracker</li>
<li>Page 1-3</li>
</ul>
</li>-->
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>

Bootstrap 3 re-order the layout of navbar in small screen

Currently I'm learning Bootstrap 3 and I need help with re-order the layout of navbar in small screen.
I've followed the example in LINK
I've replaced Default / Static / Fixed with user profile
So what I want to change is when the screen is small I will have
|---------- BRAND ----------|
|[-]----------------------profile|
Here is my sample code:
#media (max-width: 767px) {
.navbar-brand {
width: auto;
float: none;
border-bottom: 0 solid transparent;
margin: 0 -15px;
}
.navbar-toggle {
float: left;
}
.nav-user-profile .navbar-nav {
margin: 0;
}
.nav-user-profile .navbar-nav>li {
position: static;
float: left;
}
.nav-user-profile .navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
}
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" 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>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
How can I achieve it?
Thanks for ideas
I think this is what you're trying to do based on your diagram. Probably the simplest way to go is to create a div above the navbar for a second brand location. You can hide one or the other brand location with a hidden/visible class. And the profile link can be placed inside the navbar-header so it's visible across all viewports, it just needs to be positioned correctly on the right and the navbar-toggle floated to the left.
See working Snippet.
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
#media (max-width: 767px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
<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" />
<header class="visible-xs-block"> <a class="header-brand" href="#">Brand</a>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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 hidden-xs" href="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
I only added text-right very simple look where I noted with //changes*
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" 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>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
//changes*
<ul class="nav navbar-nav text-right">
//changes*
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
pull-right class may help you...
or
bootstrap is divided to 12 columns for large, medium and small size
So when it breaks into small size give brand to full 12 columns using col-sm-12 class so it will break profile to down

Bootstrap Nav logo issue

This should be simple, but I am missing something.
I've added in a new navbar to a bootstrap site, this looks like this
http://codepen.io/davidcochran/pen/Dihnl
However when I actually implement this into my bootstrap site it refuses to center.
<header role="banner" id="logo-main1"><div id="everything">
<img id="logo-main1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo">
<nav id="navbar-primary" 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="#navbar-primary-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="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" --></div>
CSS
.header[role="banner"] {
#logo-main {
display: block;
margin: 20px auto;
}
}
#navbar-primary.navbar-default {
background: transparent;
border: none;
.navbar-nav {
width: 100%;
text-align: center;
> li {
display: inline-block;
float: none;
> a {
padding-left: 30px;
padding-right: 30px;
}
}
}
}
.logo-main1 {
text-align: center
}
it looks like this:
!!! Link removed until further inspection !!!
Another css deceleration is probably overriding the selector and deceleration (below) which centers your navbar.
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;

Second click of bootstrap collapsed menu not re-collapsing the menu

When my web page is shown on small devices the menu collapses as expected and when you click on the collapsed menu icon the drop down menu appears, again as expected. However when you click on the icon again the menu does not collapse as it should.
My Bootstrap code looks like this:
#myNavbar {
position: relative;
border:none;
}
#myNavbar .nav {
bottom: 0;
right: 0;
margin-bottom: -10px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.navbar-default {
background:#FFFFFF;
border-left:none;
border-right:none;
border-top:none;
border-bottom:solid;
border-bottom-width:2px;
border-color:#01B6AC;
width:100% !important;
margin-right:0px;
padding-right:0px;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
<nav class="navbar navbar-default">
<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>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="/assets/img/outa.png" width="120px;"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li>Saved searches</li>
<li>Settings</li>
<li>About</li>
<li>Sign In</li>
</ul>
</div>
</div>
</nav>
Anyone know what I am doing wrong?