First of all I want to explain what I want to do, I want to change the value of a certain CSS style which is the border-bottom-color when scrolled. But the problem is, it's not working while the other style is working .navbar-inverse .navbar-nav>li>a. Can someone explain me why it's not working? I'm new to HTML and CSS.
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 36) {
$(".navbar-inverse .navbar-nav>li>a").css("color", "white"); //Working
$(".navbar-inverse .navbar-nav>li>a:hover").css("border-bottom-color", "white");
} else {
$(".navbar-inverse .navbar-nav>li>a").css("color", "black"); //Working
$(".navbar-inverse .navbar-nav>li>a:hover").css("border-bottom-color", "rgb(2,1,131)");
}
})
})
.navbar-inverse .navbar-nav>li>a {
color: black;
padding-top: 80px;
padding-left: 30px;
font-weight: bold;
border-bottom: 3px solid transparent;
transition: border-bottom-color 0.5s ease-in-out;
-webkit-transition: border-bottom-color 0.5s ease-in-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: rgb(2, 1, 131);
border-bottom-color: rgb(2, 1, 131);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36">
<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="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a>
<img src="img/gear.png" class="gear" width="15px">
<img src="img/lightning.png" class="lightning" width="25px">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Clients</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Team</li>
<li>HR Express</li>
<li>Activities</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
I would suggest to use CSS over jquery like below
$(document).ready(function() {
$(".navbar-inverse .navbar-nav>li>a").mouseover(function() {
var scroll = $(window).scrollTop();
if (scroll > 36) {
$(this).css("color", "red"); //Working
$(this).css("border-bottom-color", "rgb(2, 1, 131)");
} else {
$(this).css("color", "black"); //Working
$(this).css("border-bottom-color", "rgb(2,1,131)");
}
});
$(".navbar-inverse .navbar-nav>li>a").mouseleave(function() {
var scroll = $(window).scrollTop();
if (scroll > 36) {
$(this).css("color", "black");
$(this).css("border-bottom-color", "transparent");
} else {
$(this).css("color", "black");
$(this).css("border-bottom-color", "transparent");
}
});
})
.navbar-inverse .navbar-nav>li>a {
color: black;
padding-left: 30px;
font-weight: bold;
border-bottom: 3px solid transparent;
transition: border-bottom-color 0.5s ease-in-out;
-webkit-transition: border-bottom-color 0.5s ease-in-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: rgb(2, 1, 131);
border-bottom-color: rgb(2, 1, 131);
}
body {
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36">
<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="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a>
<img src="img/gear.png" class="gear" width="15px">
<img src="img/lightning.png" class="lightning" width="25px">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Clients</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Team</li>
<li>HR Express</li>
<li>Activities</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
Try changing your script like this
var wrap = $("#wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
// change color here
} else {
// change color here
}
});
I suggest you define a separate style for both cases, i.e. .navbar-menuitem and .navbar-menuitem-scrolled or something similar. Then use Javascript to add or remove the class from the item you are targeting.
What you are trying to do in jQuery above is target the CSS of a possible state of the element. jQuery does not have access to that unless the element is already in the hover state. jQuery is used to manipulate the elements in their present state, not their stylesheets, though it does have access to the currently applied styles.
Use the .addClass() and .removeClass() methods to solve your problem. Remember to use .hasClass() so you do not add the class a billion times when scrolling up and down the page.
You cannot use :hover css on script selector. You are suppose to use jquery hover() or mouseover() to achieve this. Something like below
$('.navbar-nav>li>a').hover(function(){
if(scroll>36){
//change border-color
}
else{
//change border-color
}
});
Related
$('#navbar-collapse').on('show.bs.collapse', function () {
$("html").click(function() {
//OPTION 1
document.getElementById("navbar-collapse").classList.remove('show');
//OPTION 2
//$('#navbar-collapse').hide();
//OPTION JAIME
//$('#navbar-collapse').collapse('toggle');
});
$('#navbar-collapse').click(function (e) {
e.stopPropagation();
});
});
.bg-ecs-white{
background: #fff !important;
}
.navbar-ecs .navbar-brand {
color: #34219e;
}
.navbar-ecs .navbar-brand:hover, .navbar-ecs .navbar-brand:focus {
color: #ff2069;
}
.navbar-ecs .navbar-nav .nav-link {
color: #34219e;
}
.navbar-ecs .navbar-nav .nav-link:hover, .navbar-ecs .navbar-nav .nav-link:focus {
color: #ff2069;
}
.navbar-ecs .navbar-nav .show > .nav-link,
.navbar-ecs .navbar-nav .active > .nav-link,
.navbar-ecs .navbar-nav .nav-link.show,
.navbar-ecs .navbar-nav .nav-link.active {
color: #00e1e1;
}
.navbar-ecs .navbar-toggler {
color: #ff2069;
border-color: #34219e;
}
.navbar-ecs .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 32, 105, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/***************NAV-SUBLINK**************/
#media (min-width: 992px){
.navbar-expand-lg .navbar-nav .nav-sublink {
padding-right: .5rem;
padding-left: .5rem;
}
}
.navbar-ecs .navbar-nav .nav-sublink {
color: #ff2069;
}
.navbar-ecs .navbar-nav .nav-sublink:hover, .navbar-ecs .navbar-nav .nav-sublink:focus {
color: #ff2069;
text-decoration: none;
}
.nav-sublink, .navbar {
padding: .5rem 1rem;
}
.dropdown-menu {
background-image: linear-gradient(#fff, #c6ffff); /*to right,*/
border: none;
}
.dropdown-toggle::after,
.dropup .dropdown-toggle::after {
content: none;
}
/*botones submenú navbar*/
.btn-link {
color: #34219e;
}
.btn-link:hover {
color: #ff2069;
text-decoration: none;
}
#intro {
height: 100%;
background-color: blue;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-ecs-white navbar-ecs fixed-top scrolling-navbar">
<div class="container-fluid">
<div class="logo">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<button id="btnTog" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sec 1</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div id="intro">
<br> <br><br> <br><br> <br>
<p class="text-white text-center">
CONDITION
the menu can only be opened with the button, to close, when the user touches outside the menu</p>
<p class="text-white text-center">1.open menu 2.touch background blue 3.open menu 4. :(</p>
<br>
</div>
</div>
</body>
</html>
I am trying to hide the navbar menu when a user clicks outside of a specific div. The function of identifying the click outside the div responds well, but the navbar does not respond again as it would like.
What I am trying to do, is that when the user presses outside the div, he makes the call to the same function that hides / shows the navbar menu. And I would like to know:
What function invokes the "navbar-toogle" button in bootstrap4?
I am trying all these options, but I can not find the key, each of them gives a different error.
Jquery / JavaScript
$('#navbar-collapse').on('show.bs.collapse', function () {
$("html").click(function() {
//OPTION 1
//document.getElementById("navbar-collapse").classList.remove('show'); // The "navbar-toogle" button does not respond
//OPTION 2
// $('#navbar-collapse').hide(); // Problem, the style = display: none remains active (there is no way to remove it)
//$('#navbar-collapse').css('display','none'); //I also try to assign the manual value of none first, and once it is hidden, it performs the following function (IT DOES NOT WORK)
//$('#navbar-collapse').removeAttr('style'); //If I add this line, style is completely removed, and the hide () function does not respond
//OPTION JAIME
$('#navbar-collapse').collapse('toggle'); //The menu opens always touch where the user touches. OPTION NOT VALID
// OPTION 3
//document.getElementById("btnTog").classList.add('collapsed'); //Behavior OK
//$("btnTog").attr("aria-expanded","false"); // DO NOT CHANGE THE VALUE, it always stays "true"
//document.getElementById("navbar-collapse").classList.remove('show'); // OK Behavior - Problem: If I press the Hide / Show Menu button (btnTog) It does not hide
// OPTION 4, 5, 6, ... TESTING OTHER VARIANTS without success
//$("navbar-collapse").toggle();
//$("#navbar-collapse").css("display","");
//$("#navbar-collapse").css('display','');
//$('#navbar-collapse').get(0).style.display='';
//$('#navbar-collapse').css('display',null);
//getElementById("navbar-collapse").removeAttribute("style");
//getElementById("navbar-collapse").removeAttribute("display");
//getElementById("navbar-collapse").removeAttribute("none");
//document.getElementById("#navbar-collapse").style.display = null;
//document.getElementById("navbar-collapse").classList.remove('display');
//document.getElementById("navbar-collapse").classList.add('collapsing');
});
$('#navbar-collapse').click(function (e) {
e.stopPropagation();
});
PHP / HTML
<nav class="navbar navbar-expand-lg bg-ecs-white navbar-ecs fixed-top scrolling-navbar">
<div class="container-fluid">
<div class="logo">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<button id="btnTog" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sec 1</a>
</li>
</ul>
</div>
</div>
</nav>
Holy crap, I had the biggest brain fart. I don't know why I was thinking dropdown when it was clearly collapse.
https://getbootstrap.com/docs/4.3/components/collapse/#methods
$('#navbar-collapse').collapse('hide');
This is probably what you need.
I also have a codepen that I created:
https://codepen.io/jamierytlewski/pen/YgJzEj
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>
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 am trying to create an Offcanvas Left nav bar that can be brought into view on button click.
Currently it opens fine but when it closes the top navigation of the page is very jumpy and closes instantly without an animation.
The left bar also overlaps the footer and the footer doesn't move the way it should like the top nav bar.
Bootply
Added -webkit-transition: all 1s ease; to the footer and wrapper class, because everything has to be animated.
I set overflow hidden on html, body selector, this is a fix for the jumpy footer.
The only thing left to do now is adding two lines in your javascript:
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
and
(".footer").css('-webkit-transform', 'translate(0, 0)');
I'm no expert so feel free to correct me, but i think it works the way you want it to.
$(document).ready(function() {
var menu = "close";
$(".menuToggle").click(function() {
if (menu == "close") {
$(".leftNavbar").css("-webkit-transform", "translate(0, 0)");
$(".wrapper").css('-webkit-transform', 'translate(20%, 0)');
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
menu = "open";
} else {
$(".leftNavbar").css("-webkit-transform", "translate(-100%, 0)");
$(".wrapper").css('-webkit-transform', 'translate(0, 0)');
$(".footer").css('-webkit-transform', 'translate(0, 0)');
menu = "close";
}
});
});
/* CSS used here will be applied after bootstrap.css */
.leftNavbar {
position: fixed;
width: 20%;
left: 0;
overflow: hidden;
background-color: green;
-webkit-transform: translate(-100%, 0);
-webkit-transition: all 1s ease;
}
.menuToggle .navbar-toggle .icon-bar {
background-color: black;
}
.menuToggle .navbar-toggle {
display: block;
float: left;
border: 1px solid gray;
margin-left: 5px;
margin-top: -10px;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
-webkit-transition: all 1s ease;
}
footer,
.push {
min-height: 40px;
height: auto;
}
.footer {
color: white;
-webkit-transition: all 1s ease;
}
<div class="leftNavbar">
<h2>Sidebar menu</h2>
<nav>
Home
About
Contact
Prices
</nav>
</div>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" 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">
<img id="logo" src="Logos/LetterHillustrator.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Services
</li>
<li>Our Prices
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!--------SIDE NAVBAR-------->
<!--<div class="leftNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="active"><span class="glyphicon glyphicon-chevron-right"></span> Home</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 1</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 3</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 4</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 5</li>
</ul>
</div>-->
<!-----SIDEBAR------->
<div class="menuToggle">
<button class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="push"></div>
</div>
<footer class="footer navbar-inverse">
<div class="container">
<h6 style="width:50%; text-align:center;">34 The Broadway, Greenford UB6 9PT, tel: 020 8575 0880, Email: info#GoodHome.co.uk</h6>
</div>
</footer>
Trying to get a nabber brand image to be displayed. Working fine across Chrome/Safari/IE but not in FF. When the user scrolls up, the brand image grows.
http://sam-stone.co.uk/sam/
I have tried making the image static but that does not show either. Any ideas?
CSS:
.navbar-brand img {
max-height: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
margin-top: -75px;
-webkit-filter: drop-shadow(0px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=12, Color='#444')";
}
.shrink .navbar-brand img {
max-height: 100px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
JS:
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('shrink');
}
else {
$('.navbar').removeClass('shrink'); }
});
HTML:
<nav class="navbar navbar-default navbar-fixed-top normal" role="navigation">
<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="#"><img src="images/logoCircle.png" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-top-right">
<li>
<form action="demo_form.asp">
<input type="text" class="form-control empty" id="iconified" placeholder=" Search Blog" style="font-family:Arial, FontAwesome">
<br>
</form>
</li>
<li><img src = "images/sample.png"> Samples (0 Samples)</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>SHOWCASE</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>