Menu
So I have this navbar with a logo on it. I would like the logo to be big when the user is in the header section of the page, but then shrink when the user scrolls down. Any way to do this?
<!-- NAVBAR -->
<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top">
<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
679
You can do this with regular JS. You can trigger the change with a pixel accuracy, my example will trigger when you are 5 pixels from the top.
Place this script in your <head>.
<script>
window.onscroll = function() {
growShrinkLogo()
};
function growShrinkLogo() {
var Logo = document.getElementById("Logo")
if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
Logo.style.width = '30px';
} else {
Logo.style.width = '60px';
}
}
</script>
and replace <img src="Images/logo.png" width="60px"> with <img src="Images/logo.png" style="width:60px" id='Logo'>
139
You can achieve this using JQuery-
$(document).scroll(function() {
$('#navbar').css({width: $(this).scrollTop() > 100? "50%":"100%"});
});
explanation- When scrolling- get the navbar element, change it's CSS as follows: if scrollTop() < 100 (we're not at the top of the page) - change the width to 50%. Otherwise change it to 100% (regular)
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
