I'am trying to have an alert at the top of my page with a form for my visitors to put in their phone number. It is simply a "alert alert-info" div with the form within it. So that works great because I put it at the top of my body tag. Then comes the nav, which right now is a "navbar navbar-default navbar-static-top" div. When I try to change that into a fixed-top (fixed below the alert) it just comes out on top of the alert (There might be a z-index issue, I don't know). Does anyone know how I can make the nav fixed at the top but below the alert (which should be static at the very top)?
Thanks alot in advance!
Thanks for your answers. Found the final answer my self (from another question here) using the bootstrap affix.
I put an id to the alert called "alert" and an id to the nav called "topnavbar". I then added the css:
#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
and the javascript:
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});
From: Putting content/banner above the "Fixed Top Navbar"
This put the nav between the alert and jumbotron and the nav becomes sticky after the alert.
Per Bootstrap's documentation: "The fixed navbar will overlay your other content, unless you add padding to the top of the body."
If I get what you want to do, why not try something like this.
Just add another div container in .. but at the top of the navbar.
And just place you alert in this container.
Here is the Fiddle.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container col-lg-12 bg-primary"><br><br></div>
<div class="container">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Related
This is what I have:
<div class="container" style="padding-top: 70px;">
<div id="navbar">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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="/">
<div class="col-xs-2"><img src="img/favicon.png" alt="Dev Icon" height="20px" width="20px"></div><div class="col-xs-10">FrontEnd Dev</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<?php include('includes/navbar.php'); ?>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
The <?php include('includes/navbar.php'); ?> just adds the <ul class="nav navbar-nav"> with the <li> tags from another array file.
This issue only happens when the toggle button is available on smaller devices. Clicking on the button does nothing visually (but it does change classes in the code). Clicking the button a few more times will result in the disappearing of the complete navbar. I removed any other css styling that could affect the navbar but is still the same. I use Bootstrap v3.3.7 using the CDN links from the Bootstrap website.
I found the problem. The toggle button has data-target="#navbar" which targets the <div id="navbar" class="navbar-collapse collapse">. I didn't realize that I had all the navbar wrapped up in a ´div´ with the id of navbar. So that's where the conflict was.
The issue I am having is getting both Scrollspy and a mobile menu to collapse when a link is clicked together. I can get the functionality of either one working by itself, but not together.
This snippet has scrollspy working, however, the mobile menu does not collapse when a linked is clicked.
<body data-spy="scroll" data-target="#mainNavbar">
<nav id="mainNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#">Site Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Social</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
</body>
If I add the following to each anchor tag the mobile menu will collapse on click, but scrollspy breaks:
data-toggle="collapse" data-target=".navbar-collapse.in"
I'm assuming that using data-target is causing the issue, but I'm not sure how else to get around it.
Does anybody know of a way to get these two things to work together?
In searching other answers I was able to get both features to work by themselves, but I've yet been able to find something to assist in getting them working together. If I missed an answer, please point me in the right direction.
Thanks,
After further searching, it seems like using the data-toggle and data-target in the anchor tags breaks scrollspy. I've decided to use the following JS I found on another StackOverflow question for collapsing the mobile nav menu. This doesn't work with sub-menus it seems, but I'm not worried about that.
<script>
$('.navbar-collapse a').click(function (e) {
$('.navbar-collapse').collapse('toggle');
});
</script>
How can I do the following:
I want to have sticky nav bar - fixed navbar - (let's call it NavbarMain) on top of the page, but
when the page is not scrolled I want to have just on top of NavbarMain a row with some links - linkRow - (maybe like a second menu) that is not sticky/fixed.
so when the page is not scrolled I have
linkRow
NavbarMain
after the page is scrolled I have:
NavbarMain
the linkRow will scroll and NavbarMain will replace it and stick to the top.
Basically I want something similar with:
http://www.w3schools.com/html/default.asp
notice that when you scroll, the top part is hidden and the menu take place? How can I implement that in bootstrap.
Thank you
Bootstrap has a plugin called "Affix" that offers, I think, what you want.
Just include this Javascript file in your HTML:
And read the documentation here for instructions on how to use it.
This example from the docs:
<div data-spy="affix" data-offset-top="60">
</div>
should keep 60 pixels of the div visible at the top of the screen when you scroll past it.
Set up the affix plugin
You need to use the affix plugin. It's a standard Bootstrap component.
This plugin makes the block fixed when the page is scrolled on the data-offset-top pixels:
Pixels to offset from screen when calculating position of scroll.
So you don't need to use the .navbar-fixed-top class. But you have to set some CSS properties for fixed navbar by the .navbar.affix class:
The top: 0; property sets the vertical position of the fixed navbar;
Properties left: 0; right; 0; force the navbar to expand to the width of the screen.
Avoid of page jumping
When the navbar becomes fixed it loses its space on the page. You've got two troubles at this moment:
A text below the navbar jumps up and hides under the navbar.
Page height decreases. If it becomes less than the height of the window, the page scrolls down and the plugin returns the navbar to its place. It looks as if the navbar does not allow the page to go up.
So you need a CSS trick. Add margin-bottom to the block before the navbar and add negative margin-top to the navbar. The value of both margins must be equal to the height of the unfixed navbar.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.above {
margin-bottom: 70px;
}
.navbar {
margin-top: -70px;
}
.navbar.affix {
margin-top: 0 !important;
left: 0;
right: 0;
top: 0;
}
<div class="container above">
<h1>Hello</h1>
</div>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="70">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="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="#">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<p>Paragraph 1.</p><p>Paragraph 2.</p><p>Paragraph 3.</p>
<p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
<p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I am currently working on a Bootstrap-based website, and I wanted to change the opacity of my bootstrap navbar on scroll. I wanted the navbar to become full visible at a height of 500px.
So far so good, I changed the scroll opacity using the following code I found online:
$(document).on('scroll', function (e) {
$('.navbar').css('opacity', ($(document).scrollTop() / 500));
});
My problem is that the navbar scroll opacity works on my website, but when I open my website in mobile view, the bootstrap-hamburger menu does not work.
When I press the button of the hamburger menu, the menu collapses and the hyperlinks are visible. The only problem is that I do not see a background behind those links. I tried editing this in my CSS, but setting an background there does not work, I think due to the scroll opacity script I implemented.
I am sorry for my crappy English, but I hope you understand my problem :)
Edit: Here's my navbar code:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsemenu">
<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 topnav" href="#home"><img src="img/logo.png" class="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="collapsemenu" style="padding-top:14px;">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
WORK
</li>
<li>
TEAM
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
I have a website and each page is using a bootstrap toggle/collapse navbar. All the page this works fine except for one. For some reason on one of the pages the navbar collapses once to the appropriate screen size, but it does not drop down. However, I noticed that if I comment out a JS file I have being sourced at the bottom of the html, like so <!--<script src="js/index.js"</script>--> then the drop down works. What's weird is that, 2 of the other pages on the same site source the same JS script, and the dropdown still works...maybe I'm just blind. The code for the nav is as follows :
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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="index.html">Home</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>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
<li>
Content
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And there's honestly not a lot of JS, just one scroll function, and another "hover" function that I will probably move over to CSS eventually..
$(document).ready(function() {
$(".business-header img").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $(".section-two").offset().top
}, 1500);
});
});
$(".image-wrapper img").mouseenter(function() {
$(this).css("box-shadow", " 0 0 30px #F0DEBD");
}).mouseleave(function() {
$(this).css("box-shadow", "none");
});
I should mention as well that each page has an identical nav. Is there something one of the functions that is causing this? I tried to search this topic on other posts, but was unsuccessful. Cheers
This is, most times, due to bootstrap js library being loaded more than one time