Post by matt.sapcote » Fri Apr 12, 2013 5:56 pm

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

Ecommerce SEO Expert.

http://matt-jackson.com


New member

Posts

Joined
Wed Jan 09, 2013 12:18 am

Post by Xyph3r » Fri Apr 12, 2013 7:46 pm

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

ImageImageImage
Opencart Templates, Modules, Themes & Custom Development | ShopThemer


User avatar
Active Member

Posts

Joined
Sun Feb 10, 2013 1:08 am


Post by matt.sapcote » Sat Apr 13, 2013 12:41 am

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

Ecommerce SEO Expert.

http://matt-jackson.com


New member

Posts

Joined
Wed Jan 09, 2013 12:18 am

Post by Xyph3r » Sat Apr 13, 2013 3:48 pm

you want to move it on top o f the page?

please provide the url of your website

ImageImageImage
Opencart Templates, Modules, Themes & Custom Development | ShopThemer


User avatar
Active Member

Posts

Joined
Sun Feb 10, 2013 1:08 am


Post by matt.sapcote » Sat Apr 13, 2013 10:50 pm

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).

Ecommerce SEO Expert.

http://matt-jackson.com


New member

Posts

Joined
Wed Jan 09, 2013 12:18 am

Post by matt.sapcote » Sat Apr 13, 2013 10:58 pm

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.

Ecommerce SEO Expert.

http://matt-jackson.com


New member

Posts

Joined
Wed Jan 09, 2013 12:18 am

Post by Xyph3r » Sat Apr 13, 2013 11:26 pm

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

ImageImageImage
Opencart Templates, Modules, Themes & Custom Development | ShopThemer


User avatar
Active Member

Posts

Joined
Sun Feb 10, 2013 1:08 am


Post by matt.sapcote » Fri Jun 07, 2013 8:14 pm

I found this module that worked great.
http://www.best-byte.com/best-byte-modu ... d-opencart

Ecommerce SEO Expert.

http://matt-jackson.com


New member

Posts

Joined
Wed Jan 09, 2013 12:18 am
Who is online

Users browsing this forum: Bing [Bot] and 34 guests