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
I found this module that worked great.
http://www.best-byte.com/best-byte-modu ... d-opencart