Is there a way to animate the navigation bar using CSS Transitions/Animations instead of JavaScript?
$(function() {
$('#header_nav').data('size', 'big');
});
$(window).scroll(function() {
if ($(document).scrollTop() > 0) {
if ($('#header_nav').data('size') == 'big') {
$('#header_nav').data('size', 'small');
$('#header_nav').stop().animate({
height: '78px'
}, 600);
$("ul#menu-primary-menu").css("bottom", "35%");
}
} else {
if ($('#header_nav').data('size') == 'small') {
$('#header_nav').data('size', 'big');
$('#header_nav').stop().animate({
height: '100px'
}, 600);
$("ul#menu-primary-menu").css("bottom", "0");
}
}
});#header_nav {
background: #1588cb;
width: 100%;
height: 100px;
position: fixed;
z-index: 2;
top: 0;
left: 0;
}
body {
height: 1000px
}
nav {
height: 100px
}
nav ul {
position: absolute;
bottom: 0;
margin: 0px;
right: 0px;
transition: 0.3s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="header_nav">
<a id="cos_logo" href="#" title="">
<img src="http://placehold.it/171/x30" alt="" width="171" height="30" class="no-scale" />
</a>
<nav class="primary menu">
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu">
<li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a>
</li>
</ul>
</div>
</nav>
</div>