Page 1 of 1
FAST: Sticky Navigation Bar
Posted: Fri Apr 12, 2013 5:56 pm
by matt.sapcote
Hello all,
Does anyone know a way of making the top navigation bar sticky?
I tried adding "position: fixed;" to the menu CSS but it didn't work.
Any help appreciated!
Thanks
Re: FAST: Sticky Navigation Bar
Posted: Fri Apr 12, 2013 7:46 pm
by Xyph3r
It works with position fixed.
add this
Code: Select all
position: fixed;
width: 980px;
z-index: 999;
tested on default template.
You must edit it's position after..put it where you want
Re: FAST: Sticky Navigation Bar
Posted: Sat Apr 13, 2013 12:41 am
by matt.sapcote
Thanks for the reply.
I tried adding this to line 320 of the stylesheet, however it screws up the styling of the page the same as before.
I need it to follow you down the page when you scroll (just to repeat the issue).
I am no expert so could you point me in the right direction of the file/location?
Thanks
Re: FAST: Sticky Navigation Bar
Posted: Sat Apr 13, 2013 3:48 pm
by Xyph3r
you want to move it on top o f the page?
please provide the url of your website
Re: FAST: Sticky Navigation Bar
Posted: Sat Apr 13, 2013 10:50 pm
by matt.sapcote
http://babyplants.co.uk
If you look at my page, the side cart on the right follows you as you scroll.
I want this to happen to the top navigation bar (the categories bar).
Re: FAST: Sticky Navigation Bar
Posted: Sat Apr 13, 2013 10:58 pm
by matt.sapcote
Ok, I see the problem.
I think I need it to catch it on the way down, ie. it only becomes sticky after you scroll past it.
Something like:
Code: Select all
<?php if ($display) { ?>
<script type="text/javascript">
$(document).ready(function() {
if (!!$('#menu').offset()) {
var stickyTop = $('#menu').offset().top;
$(window).scroll(function(){
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop){
$('#menu').css({ position: 'fixed', top: 0 });
}
else {
$('#menu').css('position','static');
}
});
}
});
</script>
<?php } ?>
I'll try and add this into the header and see how it works out.
Re: FAST: Sticky Navigation Bar
Posted: Sat Apr 13, 2013 11:26 pm
by Xyph3r
You didn't specify that you want this...you said css and I assumed that you want the menu positioned on top of the page
L.E. If you make menu sticky..the way you want...I believe you need to edit the javascript code for cart module to make it remain under menu
Re: FAST: Sticky Navigation Bar
Posted: Fri Jun 07, 2013 8:14 pm
by matt.sapcote