I don't code javascript so it is a problem for me to understand how to develop my navbar to look like this: http://www.bootply.com/kD5wiG5udv
I have obviously used common sense and swapped my selectors but it still isn't working. Could someone please advise me on what steps to take next?
Please use the above website to navigate through my code as I am not going to add the bootstrap files to this post. They are too large.
Benjamin
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<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="#">
<img alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a href="#">Projects</li>
<li><a href="#">Services</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-default
{
background-color: #fbfbfb;
}
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #f2f3f2;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
color:#222;
}
.navbar-nav {
margin-left: 50px;
margin-top: -5px;
}
Javascript:
/* affix the navbar after scroll below header */
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}
});
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},1000);
})
/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
var link = $(this).attr('href');
var posi = $(link).offset().top;
$('body,html').animate({scrollTop:posi},700);
});
In my opinion it would be great to do as much as possible in CSS if your website does not to be compatible with old versions of the browsers. I'm not sure if the Bootstrap has it's own way to implement something similar, but here you can get the idea on how you'd do this yourself.
The main role of jQuery here would be just to add a class on scroll event, which would trigger an animation of opacity. This should be much cleaner solution for the problem as it would be smooth and fast. Here is the working fiddle: https://jsfiddle.net/q5jo781c/1/
This part toggles class on scroll:
$(document).ready(function(){
$(document).scroll(function(){
var st = $(this).scrollTop();
if(st > 200) {
$("navbar").addClass('fixed');
} else {
$("navbar").removeClass('fixed');
}
});
});
And the CSS:
navbar {
width: 100%;
display: block;
height: 50px;
background-color: black;
}
navbar.fixed {
position: fixed;
top: 0;
left: 0;
background-color: white;
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
You can find more of the CSS in the fiddle. Hope it helps.
Related
Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
The navbar doesn't resize when using Google-Chrome's Toggle Device Toolbar. I found a similar question where the problem was solved by making sure the .js files are getting loaded properly. But in my case this doesn't work.
However, the same works fine in Firefox.
.navbar {
margin-bottom: 0;
background-color: #0E293C;
z-index: 99;
border: 0;
font-size: 14px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: 'Muli', sans-serif;
}
.navbar li a,
.navbar .navbar-brand {
color: #19BBD5 !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
color: #C6DAEC !important;
background-color: #0E293C !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
<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="#">Company Name</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Updates</li>
<li>About</li>
<li>How to use</li>
<li>Pricing</li>
<li>Contact</li>
<li>Find Us</li>
</ul>
</div>
</div>
</nav>
The website has been written by following this tutorial
The root cause of this issue was that I had an <iframe> element which was not getting loaded properly. Thus the Error404 box wasn't resizing.
In CSS I added overflow-x:hidden under body this made sure that navbar gets resized when I open my bootstrap website on screens of different sizes. And in my html contained the <iframe> element in container.
I've quite a long drop down menu on a site I'm working on when it switches over to mobile. For the life of me I cannot get this dropdown navbar toggle to stay open. What it currently does is opens to show all the selections and then it snaps up to only show one possible selection. It's a scrollable menu, but I want it to stay open until it's clicked.... Can anyone see what I'm doing wrong?
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}
//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
#media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 50px;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
REGISTRATION
</li>
<li>
COURSE OVERVIEW
</li>
<li>
SERVICES
</li>
<li>
INSTRUCTORS
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
LINKS
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
You have set the height to 50px in the #media-query. Change it to auto, and all is well.
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Only enable if the document has a long scroll bar
// Note the window height + offset
if (($(window).height() + 100) < $(document).height()) {
$('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 100
}
});
}
//Fade in for well-trigger on index.html
var divs = $('.well-trigger');
$(window).scroll(function() {
if ($(window).scrollTop() < 480) {
divs.stop(true, true).fadeIn("slow");
} else {
divs.stop(true, true).fadeOut("slow");
}
});
.navbar {
font-family: 'Contrail One', cursive;
padding: 10px;
font-size: 18px;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-brand {
padding-top: 5px;
}
.navbar-toggle {
margin: 10px 0;
}
.navbar-inverse {
background-color: #000011;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: 80px;
line-height: 80px;
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom: 0;
margin: 0px -5px 0px -5px;
}
#media (max-width: 767px) {
.navbar-brand {
padding: 0px;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
}
.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
height: auto;
line-height: 50px;
padding-left: 5px;
padding-right: 5px;
}
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 href="http://www.example.com/testing/index.html">
<div class="navbar-brand navbar-brand-left">
<img class="hidden-xs" src="img/logo_transparent_REG.png" alt="">
<img class="visible-xs" src="img/logo_transparent_XS.png" alt="">
</div>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
REGISTRATION
</li>
<li>
COURSE OVERVIEW
</li>
<li>
SERVICES
</li>
<li>
INSTRUCTORS
</li>
<li>
BLOG
</li>
<li>
CONTACT
</li>
<li>
LINKS
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
Here's my fiddle of my html/bootstrap code.
<body>
<h1 style="text-align:center">AntwerPay</h1>
<!--Navbar-->
<nav class="navbar navbar-inverse">
<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>
</button>
<a class="navbar-brand" href="#">AntwerPay</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Gebieden
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Gebied 1</li>
</ul>
</li>
<li>Alle Gebieden</li>
</ul>
</div>
</div>
</nav>
</body>
As you can see in my navbar everything is aligned real nicely to the left. This is a problem for me. I want the navbar-brand to be on the left, and i want the 3 other buttons to be centered. I have researched this a lot and found various .css codes but none worked for me.
You can do this using CSS, I've included a suggestion for manually adjusting the position of the items:
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
/* You'd have to adjust this whenever an item is added to the nav-bar */
margin-right: 10%;
}
.navbar .navbar-collapse {
text-align: center;
}
This has been answered already here
Along with your (Again) updated fiddle here
use this snippet
.navbar-bav { float: none !important; text-align:center; }
.navbar-nav > li { display:inline-block; float: none !important; }
Updated fiddle
Remember
If you do NOT know how to make the navbar responsive, then implement the codes above in a #media (min-width: 768px) query in order not to fail the responsiveness of Bootstrap Navbar.
Hope this works for you:
#myNavbar {
text-align: center;
}
.navbar-nav {
margin: 0 auto;
display: inline-block;
float: none;
}
Make shure to keep an eye on the mobile view.
I was looking for very long time for pretty solution for dynamic affix with Bootstrap 3 and finally my simply solution is below. Everything works great, except one feature. When i resize website to mobile and expand menu, whole list of menu items is transparent. When i starting scroll down, after the moment when navbar is affixed transparent problem does not exist. I read some posts that it can be caused by relative position for navbar but dont know how resolve this problem and dont loss my functionality.
<div id="nav-wrapper">
<div id="nav" class="navbar-inverse">
<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>
</button>
</div>
<div class=" collapse navbar-collapse navbar-center" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">ZESPÓL</li>
<li>ZAPLECZE</li>
<li>GALERIA</li>
<li>MATERIALY</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
</div>
<!-- navbar -->
</div>
js:
function myaffix() {
var affixoffset = $('.navbar-inverse').offset().top
$('#nav-wrapper').height($(".navbar-inverse").height());
$(window).scroll(function() {
if ($(window).scrollTop() <= affixoffset) {
$('.navbar-inverse').removeClass('affix');
} else {
$('.navbar-inverse').addClass('affix');
}
});
};
$(document).ready(function() {
myaffix();
$(window).on("resize", function() {
myaffix();
});
});
and part of my css:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
#nav > .navbar-inner {
border-left: 0;
}
.navbar-toggle
{
float:none;
}
.navbar-header
{
text-align:center;
}
.navbar-inverse .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-inverse .navbar-collapse {
text-align: center;
}
All right? First of all I want to thank the help. Well, my question is as follows:
I would like to to scroll the mouse and create a background and decrease the space from the top, also change the logo. The question of the top bottom and then I could do as code below. However, I do not know what to do to change the logo.
HTML:
<div class="col-md-12">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!-- copy into bootstrap -->
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
<span class="bar4"></span>
<!-- end of code for bootstrap -->
</button>
<h1 class="navbar-brand-spacing">
<a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS:
.navbar-brand {
text-transform: none;
margin: 0px;
min-width: 214px;
text-indent: -9999px;
height: 70px;
background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand-scroll {
background: url(../images/logo-telbox-scroll.png) no-repeat;
}
JS:
$(window).scroll(function () {
var e = $(this).scrollTop();
e > 60 ? $("header").css("background", "#16181F").css("padding", "0px 0px 10px") : $("header").css("background", "transparent").css("padding", "20px 0px 20px");
});
Thanks :)
So, first off, you have the same class added twice here - <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
You may do the following to toggle a class based on the scrollTop
.navbar-brand {
text-transform: none;
margin: 0px;
min-width: 214px;
text-indent: -9999px;
height: 70px;
background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand.navbar-brand-scroll {
background: url(../images/logo-telbox-scroll.png) no-repeat;
}
var $header = $("header");
var $logo = $("h1.navbar-brand-spacing > a");
$(window).scroll(function () {
var e = $(this).scrollTop();
if (e > 60) {
$header.css("background", "#16181F").css("padding", "0px 0px 10px");
$logo.addClass('navbar-brand-scroll');
} else {
$header.css("background", "transparent").css("padding", "20px 0px 20px");
$logo.removeClass('navbar-brand-scroll');
}
});
P.S. Scroll triggers for every pixel scrolled and way too much scripts on scroll may choke your browser. Use it sparingly!