I recently created a one-page website and wanted to make my navbar fixed. Currently, it looks like the image linked below:
In order to achieve this, I floated the logo to the left, the navbar to the right, and set the position to absolute so that the right and bottom could be set to zero.
Here is my HTML and some of the CSS:
<div class="navigation">
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-menu-1-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-55"><a href="http://localhost/scentology/">Home</a></li>
<li id="menu-item-107" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-107"><a href="#about">About</a></li>
<li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-144"><a href="#products-and-services">Products & Services</a></li>
<li id="menu-item-142" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142"><a href="#scent-marketing">Scent Marketing</a></li>
<li id="menu-item-145" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-145"><a href="#clients-and-industries">Clients & Industries</a></li>
<li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-143"><a href="#contact">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
.navigation{
height:40px; line-height:40px;
}
nav#site-navigation {
position: absolute;
right: 0;
bottom: 0;
}
Although I am not very familiar with scripting yet, I attempted to adjust this code snippet:
<script>
// Create a clone of the menu, right next to original.
$('.navigation').addClass('original').clone().insertAfter('.navigation').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
The menu became fixed, but the issue is that I can't see it properly due to the position properties. I had to adjust the bottom value to make it visible. This means it will only work when I scroll to the bottom. When I try to scroll back to the top, the menu disappears.
Is there a way to keep the navbar fixed at the top when scrolling down and return it to its default position when scrolling up?