I have a bootstrap header and I have a container body.
For some reason the when i click on the hamburger menu the background is translucent.
I tried changing the opacity, header position to static / fixed / absolute, also changed background color nothing seems to work.
After Clicking menu
Here is my nav bar code
<div class="container">
<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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav hidden-lg hidden-md hidden-sm">
<li>View Sample Contract</li>
<li>FAQs</li>
<li>Call me with a quote</li>
</ul>
</div>
</div><!-- Container -->
</nav>
Background is not translucent, your "Step 1:..." has a higher z-index.
<nav class="navbar navbar-default navbar-fixed-top">
Adding navbar-fixed-top seems to have solved the problem.
Reference from: http://jsfiddle.net/menriquez/L235efdv/
Related
I'm trying to build a navbar with bootstrap. My navbar should have two elements:
Close-icon on the left side of the bar
Label element on the right side of the bar, but it should be placed left to the menu-icon (which is shown on small devices). If there is no menu-icon, the label element should be just on the right side of the bar
This is what I tried so far:
JSFiddle: http://jsfiddle.net/0jejx693/1/
<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-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>
<ul class="nav navbar-nav nav-pills navbar-right">
<li><a class="navbar-brand"><i class="fa fa-power-off"></i></a></li>
<li>
<a href="/link">
<span class="label"><i class="fa fa-commenting"></i> 10</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
So the result should look like this:
small
| [icon] [lable] [menu] |
big
| [icon] [lable] |
Updated fiddle. Hmm, sry cause I deleted "label" class from span, but it was not showing the "fa" icon. So, was only for test. And, there's a label left to toggle-menu. I think that's what you want, am I right?
http://jsfiddle.net/kqemk0zk/
.label-cont{
position: absolute!important; /*Important used only to example. Could be overrated with hierarchy*/
right: 60px;
}
Something like this?
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix-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">
<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 page-scroll" href="#page-top"><i class="fa fa-power-off"></i></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">
<li>
<a href="/link">
<span class="label"><i class="fa fa-commenting"></i> 10</span>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'm working my way through Microsoft's Intro to Bootstrap course (DEV203x) on edx. I came across this piece of info on there:
To add normal links that are not to be considered as part of the navbar, add the navbar-link class to the a element. The anchor must be contained inside of a navbar-text container.
<div class="navbar-text">
<a class="navbar-link" href="URL here">
Follow us!
</a>
</div>
Normal links are supposedly added like this:
<ul><li>
<a href="URL here">
A normal link!
</a>
</li></ul>
There doesn't seem much difference in how these links appear on page. Only the styling for navbar-text is applied to navbar-link because it's enclosed in that tag.
Am I missing something here?
Just to be safe, normal links are added with <ul class="nav navbar-nav">, not just a ul (which I'm pretty sure you know allready).
For folks using standard links that are not within the regular navbar
navigation component, use the .navbar-link class to add the proper
colors for the default and inverse navbar options.
The differences may be subtle but they're important to know as they can be very useful. links that are not within the regular navigation is where this comes into play as you can use these classes to add text or links to your navbar that does not fall withing the standard ul + li structure.
In the examples you provide, there are differences (if even very small). There probably wouldn't be a need for this (see Example 3):
<div class="navbar-text">
<a class="navbar-link" href="URL here">
Follow us!
</a>
</div>
as Bootstrap takes care of HREFs inside a li class as far as positioning and styling for it's navigation components so this wouldn't make sense and actually does break if you reduce your browser and open the collapsed navbar you'll see the link out of place in Example 3. You'll also see that if you hover over that first link, it will be underlined. This is not the case for a default navigation link.
As examples: If you need some text/link(s) to remain exposed when your navbar collapses for mobile, use these tags inside your navbar-header and they'll be positioned/styled appropriately so you won't (necessarily) have to write the CSS yourself. As well as inside the navbar-collapse panel but outside of the ul class.
See 3 examples in the following Snippet at Full Page.
1) Using these classes appropriately.
2) Same example structure as the First but without these classes applied.
3) What I believe your example illustrates.
<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" />
<h3 class="alert alert-success">Example 1: Using Bootstrap classes</h3>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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>
<p class="navbar-text navbar-left">This is navbar-text and this is a navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-1">
<p class="navbar-text">This is navbar-text and this is a navbar-link
</p>
<ul class="nav navbar-nav">
<li class="active">Link
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-info">Example 2: Not using Bootstrap classes</h3>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-2" 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>
<p class="not-navbar-text">This is NOT navbar-text and this is NOT navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-2">
<p class="not-navbar-text">This is NOT navbar-text and this is NOT navbar-link
</p>
<ul class="nav navbar-nav">
<li class="active">Link
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-warning">Example 3: You example</h3>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-3" 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>
<div class="collapse navbar-collapse" id="bs-3">
<ul class="nav navbar-nav">
<li>
<div class="navbar-text">Follow us!
</div>
</li>
<li>Follow us!
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-success">Example 4: Navbar-Link</h3>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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>
<p class="navbar-text"> Normal Link Navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-1">
<ul class="nav navbar-nav">
<li>Normal Link
</li>
<li>Navbar-link
</li>
</ul>
</div>
</div>
</nav>
The first example is using the bootstrap structure for css/styling, while the second example is bare bones html. Bootstrap may not be applying anything in this case due to your own css/stylesheets overriding them, with out more information it is difficult to tell.
You will also want to confirm that you have bootstrap properly setup, as those should look different as per Bootstraps look. See here for an example of a navbar-link; http://getbootstrap.com/components/#navbar-links.
I am having a bit of trouble with my top fixed collapsible bootstrap navbar.
Whenever I click on a link of my navigation bar, a strange horizontal bar that looks like a horizontal scrollbar appears above the navbar and then disappears instantly.
I tried removing all my JS , CSS, and the rest of the page leaving only the navbar, and the bug is still there, so I assume it is something about the syntax of that navbar.
Below is the code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Proyecto</li>
<li>Galería</li>
<li>Planos</li>
<li>Ubicación</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(0000) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>
Also, bootstrap scrollspy is not working for me on this navbar. I guess it might be the same issue.
Thank you very much for your assistance
EDIT: I found that the problem is on making the navbar collapsible. If I remove the data attributes from the li elements, this problem is gone, but on mobile when I touch on some link the navbar doesnt collapse back.
There is a known bug in bootstrap, according to this post :
Bootstrap 3 nav dropdown
You have to add some CSS to fix it :
.navbar-collapse.in {
overflow-y: visible;
}
This a demo page you need to modify as you needs..DEMO Page
HTML part
<nav class="navbar navbar-default navbar-fixed-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>
<a class="navbar-brand" href="#">My Application</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>
<li>Home</li>
<li>Home</li>
</ul></div>
</div></nav>
I found the solution to my problem.
The solution was adding .in class to the data-target attribute of the li elements on the navbar.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar.in">Home</li>
<li data-toggle="collapse" data-target="#navbar.in">Proyecto</li>
<li data-toggle="collapse" data-target="#navbar.in">Galería</li>
<li data-toggle="collapse" data-target="#navbar.in">Planos</li>
<li data-toggle="collapse" data-target="#navbar.in">Ubicación</li>
<li data-toggle="collapse" data-target="#navbar.in">Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(54+11) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>
Maxime Mettley's comment helped. Thank you. But since I was seeing a scrollbar during the collapsing activity, I needed to fix it like this:
.navbar-collapse.in, .navbar-collapse.collapsing {
overflow-y: visible;
}
Bootstrap applies the "collapsing" class as the menu collapses, then "in" once the collapse is complete. I hope this helps someone else.
I am using Bootstrap v3.2.0 and have created this navbar:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="#home">Site Title</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Programming</li>
<li>Robotics</li>
<li>Electrical Engineering</li>
<li>Web Development</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
As you can see, the site uses anchors to navigate the page (it is one long page). It works on mobile, but the menu does not collapse when I click on a link, and I have to click on the button again to see the page. Does anyone have a suggestion on how to collapse it when a link is clicked? I was thinking if I added data-toggle="collapse" data-target=".navbar-collapse" to each link, it would work, but it didn't.
Add this to your js. please see here for demo: http://jsbin.com/lapon/1/edit
$('.nav a').on('click', function(){
$(".navbar-toggle").click()
});
i want recreate this image:
in a navbar-fixed-top using Bootstrap, at the moment i have add this custom CSS:
navbar-fixed-top.css
.navbar {
background-color: #8CB5A0;
background-image: none;
}
and this is the bootstrap code of the navbar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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>
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
About
</li>
</ul>
</div>
</div>
</div>
and this is the css:
but how i can add the double red border, because there are two type of red, or better i can add directly the image as background?
Here is a better option making use of box-shadow
Double border
Add the image a background like so background: url("urltoimage") repeat-x;