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?
Related
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>
I am designing a menu using bootstrap3. It should look like the one shown in the picture. But I am unable to create a menu like that. I have tried creating one and the link to my design is https://codepen.io/irshad437/pen/EyQLVv.Some code is also shown below. But you must check it on Codepen.io (NOT LOOKING GOOD HERE)
<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="#">MyGrade <span class="circle-txt">Up</span></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>HOME</li>
<hr class="vertical" />
<li>EXPLORE</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<button type="submit" class="btn btn-default btn-rnd">Create Portfolio</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Anonymous <br />0 pts</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<img class="img-circle nav-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/677716/profile/profile-80_1.jpg" alt="?" class="img-round"/>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
.btn-rnd{
border-radius:10px;
}
.navbar-nav li{
margin-left:20px;
margin-right:20px;
}
.nav-img{
width:40px;
height:40px;
}
.vertical{
position:absolute;
width:1px;
height:25px;
color: black;
background-color:black;
display:inline-block;
}
.padding-8{
padding-top:8px;
}
.img-circle{
border: 1px solid black;
}
.circle-txt{
height: 40px;
width: 40px;
display: inline-block;
text-align: center;
vertical-align: -10px;
padding-top:8px;
border-radius: 50%;
background: white;
border-style:solid;
border-width:1px;
}
Problem: I am unable to fix the pixels at the proper position as shown in the design.
This should work fine, Have a look, here is the fix.
https://codepen.io/anon/pen/QEmZWR
HTML:
<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="#">MyGrade <span class="circle-txt">Up</span></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>HOME</li>
<hr class="vertical" />
<li>EXPLORE</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<button type="submit" class="btn btn-default btn-rnd">Create Portfolio</button>
</form>
<ul class="annon nav navbar-nav navbar-right">
<li>Anonymous <br />0 pts</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<img class="img-circle nav-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/677716/profile/profile-80_1.jpg" alt="?" class="img-round"/>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.btn-rnd{
border-radius:10px;
}
.navbar-nav li{
margin-left:20px;
margin-right:20px;
}
.nav-img{
width:40px;
height:40px;
}
.vertical{
position:absolute;
width:1px;
height:25px;
color: black;
background-color:black;
display:inline-block;
}
.padding-8{
padding-top:8px;
}
.img-circle{
border: 1px solid black;
}
.circle-txt{
height: 40px;
width: 40px;
display: inline-block;
text-align: center;
vertical-align: middle;
padding-top:8px;
border-radius: 50%;
background: white;
border-style:solid;
border-width:1px;
}
a{
margin: 0px;
padding: 0px;
}
.navbar-nav li{
margin-top:10px;
}
.navbar-form .btn{
margin-top:10px;
}
.annon li{
margin:0px;
}
.navbar-nav .img-circle{
padding:0xp;
margin-top:13px;
}
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
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.
I'm not completely sure as to why my a href links aren't working...At one point in time it was working, I did some research on the Z-Index but that doesn't seem to be the problem, nor do I have an overlapping div.
Please visit the JSFIDDLE.NET for the demo.
<nav class="navbar-default">
<div class="util-bar-content">
<div class="container">
<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="#"><img src="images/util-bar-logo.png" /></a> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
<p style="margin-top: 6px; max-height: 36px;">1(800) 000 - 0000</p>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
</div>
</div>
</div>
</nav>
Here's the CSS
.navbar-nav > li > a, .navbar-brand {
padding-top: 8px !important;
padding-bottom: 0 !important;
height: 36px;
}.navbar-brand {
padding-top: 0px !important;
padding-bottom: 0 !important;
height: 36px;
}.navbar {
min-height: 36px !important;
}
I'm using the BootStrap Framework.
Change your give your links a class of link and then set that class to have a z-index of 9999;
Example:
<li>
<a class="links" href="#">About</a>
</li>
.links {
z-index:9999;
}