I am creating a site using a Bootstrap 3 navbar and am trying to change the background colour from transparent to solid when the user scrolls to a certain point on the site.
I have written the following the code although had no luck in getting it to work. Thanks in advance.
HTML:
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
<div class="container">
<div class="navbar-header">
<!-- Mobile Hamburger -->
<button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
</div>
<div class="navbar-collapse collapse">
<!-- Navigation Links -->
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>COURSES</li>
<li>PRICING</li>
<li>ACCOUNT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar { background-color:#101010; border:none; }
#logo { width:45px; height:auto; }
.navbar-right li a { color:#e5e5e5; font-family:headings; font-size:14px; }
ul.navbar-right li a:hover { color:#e5e5e5; text-decoration: none; background-color:transparent; }
ul.navbar-right li a:visited { color:#e5e5e5; text-decoration:none; }
#media only screen and (min-width:768px) {
.navbar { background-color: transparent; border:none; transition:0.8s; }
.nav-scrolled { background-color:#181818; transition:0.8s; }
.navbar-right li a { letter-spacing:3px; }
}
JS:
// Change nav on scroll
$(function() {
var header = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});
ALT:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="assets/js/jquery-3.2.1.min.js"></script>
Here's your exact code, minus the media query around the css, to show you that it works. I also added extra height to the nav so you can actually scroll.
If your code isn't working on your computer, you may not be referencing files properly.
// Change nav on scroll
$(function() {
var header = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.addClass("nav-scrolled");
} else {
header.removeClass("nav-scrolled");
}
})
});
.navbar { background-color:#101010; border:none; height: 200vh}
#logo { width:45px; height:auto; }
.navbar-right li a { color:#e5e5e5; font-family:headings; font-size:14px; }
ul.navbar-right li a:hover { color:#e5e5e5; text-decoration: none; background-color:transparent; }
ul.navbar-right li a:visited { color:#e5e5e5; text-decoration:none; }
.navbar { background-color: transparent; border:none; transition:0.8s; }
.nav-scrolled { background-color:#181818; transition:0.8s; }
.navbar-right li a { letter-spacing:3px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- navigation -->
<nav class="navbar navbar-fixed-top" id="nav">
<div class="container">
<div class="navbar-header">
<!-- Mobile Hamburger -->
<button type="button" class="navbar-toggle" id="nav-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href=""><img id="logo" src="assets/img/logo.png" alt="Flock+ Logo"></a>
</div>
<div class="navbar-collapse collapse">
<!-- Navigation Links -->
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>COURSES</li>
<li>PRICING</li>
<li>ACCOUNT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
Related
Does anyone know how I can use an image as a nav bar,
I want to use my logo as a button so that when users click on the logo, a drop down menu appears that fills the entire page.
Currently I have a burger Tab and am implementing the drop down menu like so
<nav class="navbar navbar-inverse">
<div class="container-field">
<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="#">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: darkgray;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
border:0;
background-image: i
}
.navbar-brand {
float: right;
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active
a:focus, .navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: darkgray;
}
.navbar-inverse .navbar-nav li a {
Color:#D5D5D5;
}
Since you said you're fine with using JavaScript.
Add the following code to your HTML document:
<!DOCTYPE html>
...
<script type="text/javascript" src="thePathToYourJSfile.js"></script>
</body>
</html>
With CSS, style your menu however you wish to, but also add:
display: none;
And your JavaScript could look something like the following:
var logo = document.getElementById('id-of-your-logo')
var menu = document.getElementById('id-of-your-menu')
// this attaches a listener for the click event to your logo element
logo.onclick = function() {
// when your logo is clicked, the code in this function will execute
// the code below checks whether or not the menu is already displaying, and then displays the menu or hides it accordingly
menu.style.display = window.getComputedStyle(menu).display !== "none" ? "none" : "block"
}
Your html had some small errors. It should have been like this
<nav class="navbar navbar-inverse">
<div class="container-field">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar right">
<li class="active">Health</li>
<li>Insurance</li>
<li>Track</li>
</ul>
</div>
</div>
</nav>
If you encounter any trouble just tell us
I have a left side navbar in bootstrap, when clicking on a menu I want to show a section with jquery.show. Can't see why it doesn't show up:
<!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
<title>Nav</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style media="screen">
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
</style>
<style media="screen">
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Section 1</li>
<li class="active">Section 2</li>
<li class="active">Section 3</li>
</ul><!--/ #nav navbar-nav -->
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<h2>Test</h2>
<form class="form-group" action="index.html" method="post" id="sections">
<div id="section_1" class="hidden">
section 1
</div>
<div id="section_2" class="hidden">
section 2
</div>
<div id="section_3" class="hidden">
section 3
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('.mnu').click(function(event) {
var hash = $(this).attr("href") + "";
$(hash).show();
});
</script>
</body>
</html>
Clicking on any menu element will open the corresponding section.
You don't have to use show(). I even doubt that it would work. I suggest you to check which element of the mnu was clicked, get it's index and remove class of corresponding section (with the same index).
$('.nav').find('li').click(function() {
$('#sections').find('div').addClass('hidden');
$('#sections').find('div').eq($(this).index()).removeClass('hidden');
});
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.hidden {
display: none;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Section 1</li>
<li class="active">Section 2</li>
<li class="active">Section 3</li>
</ul>
<!--/ #nav navbar-nav -->
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<h2>Test</h2>
<form class="form-group" action="index.html" method="post" id="sections">
<div id="section_1" class="hidden">
section 1
</div>
<div id="section_2" class="hidden">
section 2
</div>
<div id="section_3" class="hidden">
section 3
</div>
</form>
</div>
</div>
</div>
When I click on the navbar-collapse button, the elements from the navbar expand but they're not vertically aligned. How would you do this by keeping Link5 and Link6 right-aligned on the navbar?
Here's the JSFiddle: http://jsfiddle.net/sushiknives/yvgr92c3/1/
EDIT: nav-pills seems to be the issue. If I replace it with navbar-nav it automatically stacks vertically. In that case is there a way to recreate the nav-pills effect?
you can use flexbox property flex-direction : column to stack it vertical hope this will help you
body {
width: 100% margin: auto;
background-color: #f7f7f7;
}
.navbar {
background: #FFFFFF
}
.nav {
width: 100%
}
.nav a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
ul {
display: flex;
flex-direction: column;
}
.nav li {
display: inline;
}
.content {
margin-top: 100px;
}
<title>Navabar Test</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="texthover_test.css">
<body>
<div 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="#example"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example">
<ul class="nav nav-pills">
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li class="pull-right">Link5
</li>
<li class="pull-right">Link6
</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Hope I understand your question. The li has to be full width of the parent element or you can shorten the width of the ul itself and make the li the same width as the ul. Adjust as needed.
.nav li{
display: block;
width: 100%;
}
See it stacked as you want
this is my first post so please be gentle.
I'm trying to create a nav bar using html5 and css and it needs to work with ie8. I have managed to nearly everything i need to done but one thing. i cant make my icons and text to centre align correctly for each navigation button
CSS
.navbar-default .navbar-nav>.active>a:before,
.navbar-nav>li>a:before {
background-repeat: no-repeat;
background-position: 0 top;
content: "";
height: 40px;
width: 40px;
margin-right: 10px;
vertical-align: top;
background-color:transparent;
display:inline-block;
float:none;
}
.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.dashboard:before { background-image: url('/VerificationServices/Static/Icons/dashboard.png');}
.navbar-default .navbar-nav>.active>a.about:before,
.navbar-nav>li>a.uploadscv:before { background-image: url('/VerificationServices/Static/Icons/UploadSCV.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.uploaddocs:before { background-image: url('/VerificationServices/Static/Icons/UploadDocs.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.viewrun:before { background-image: url('/VerificationServices/Static/Icons/viewrun.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.selfver:before { background-image: url('/VerificationServices/Static/Icons/selfver.png'); }
.navbar-default .navbar-nav>.active>a.contact:before,
.navbar-nav>li>a.selfver:hover { background-image: url('/VerificationServices/Static/Icons/dashboard.png'); }
HTML
<!-- Fixed 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="#">Norges Idrettshøgskole</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Upload SCV File</li>
<li>Upload documents</li>
<li>View run results</li>
<li>Self verification</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
here is your updated and working fiddle :
http://jsfiddle.net/553n0udw/1/ Updated Fiddle
i am using glyph-icon, you can use anything you just need to make a class for you custom icon and give it a background url. follow the bootstrap icon rules that will help a lot.
I am using twitter Bootstrap for my website and it has a fixed navbar on top. When I am resizing window in my desktop browser, everything is fine. When I am opening the same site on mobile, I can see navbar-brand but not the toggle button. I'm posting screenshots for a better understanding (first one is desktop firefox and second one is android):
This is driving me crazy!!!
The Code:
.navbar-floating {
background: black;
color: #5b5656;
width: 100%;
border-radius: 0;
}
.navbar-floating .navbar-brand {
color: #810000;
font-size: 20px;
text-transform: uppercase;
}
.navbar-floating .navbar-brand:after {
content: ' | ';
color: #810000;
position: relative;
top: -3px;
}
#floating-nav {
position: fixed;
/* display: none; */
top: 0;
width: 100%;
height: 50px;
}
#floating-nav.navbar {
min-height: 1px;
}
#floating-nav ul li a {
font-size: 20px;
}
#floating-nav ul li a:hover {
background: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<nav class="navbar navbar-floating navbar-default" role="navigation" id="floating-nav" >
<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="#hidden-nav">
<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 scroll-top" href="#">DSA Media Group</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="hidden-nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agency</li>
<li>Capabilities</li>
<li>Projects</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
What am I doing wrong? Any help is much appreciated.
Just add a navbar-default class to the div wrapping your <ul> element like this:
<div class="collapse navbar-collapse navbar-default" id="hidden-nav">
<ul class="nav navbar-nav">
....
</ul>
</div>
Try using .navbar-dark as
<nav class="navbar navbar-dark navbar-floating navbar-default" role="navigation" id="floating-nav" >
<div class="container">
.........
</div>
</nav>
For me, the solution is really annoying
change navbar-expand-sm to navbar-expand-lg in side <nav class=
It's inside of your bootstrap css. It's defined by default to hidde on md. all you gotta do is creat a new line in your style page..navbar-expand-md .navbar-toggler{display: block !important;}