• 0
Sign in to follow this  
Followers 0

How keep scrollspy (spynav) centered when it locks to top of page


Question

Posted · Report post

Hi,

 

I'm trying to find out how I can keep the scrollspy centered on the page when it locks to the top of the page. In the current DMS/Bootstrap implementation the scrollspy jumps to the left. This is confusing for visitors because they have to refocus there eyes on a different spot.

 

Any help would be appreciated in how I can prevent the thing from jumping. You can see the effect here http://j.mp/15Zpyks

 

Thanks.

 

Jan

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted · Report post

Going to be creating a page in the docs that will cover this, add the following to your custom CSS.

 

https://gist.github.com/Dannyholt/6492620

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jan, I apologize.  I haven't tried ScrollSpy yet. It's on my hitlist for this weekend.

 

batman if you're experienced with this topic, please feel free to chime in.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi jan

I´m not sure, but please, you can try with

 

 

#spynav.spynav.spynav-fixed {margin: 0px auto !important;}

 

I feel It's on my hitlist for this weekend too like Rob

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob and Batman,

 

thanks for helping out. I've tried your suggestion batman, but with no luck. I've staring in Chrome dev tools over de last ten minutes to changing CSS when it snaps and when it not. But I can't wrap my head around it. I've tried your suggestion also with spaces inbetween the ID's but that aso didn't so it.

 

Hope it will be a clear weekend regarding Spynav ;-)

 

Thanks again, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny, 

 

Thanks for your code, but I'm sorry to say it didn't change the jumping to the left behaviour of the Spynav when locking to the top of the screen. I've added it to my child theme CSS but with no effect. I've deactivated my W3 Total Cache plugin (I thought maybe a caching issue) but that also wasn't the problem. Then tried to add it to my custom LESS file, but that one gave a compile error and finally I added it to the custom CSS in the page but also with no success.

 

Have you got an idea what I could be doing wrong? 

 

Thanks, Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah, my bad the code I gave was slightly incorrect. I have now updated, so try again and this will work, just tried on my test site.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny,

 

Thanks a lot, it works now. The only thing is that it still jumps a bit to the left, maybe 8px or so. Do you have an idea how I can deal with that too? The site I'm working on is at http://www.lovo.nu/welkom-2

 

Thanks,

 

Jan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thats not occurring on my test site, therefore its related to either your own custom css or you have added an offset to ScrollSpy to make it look as though its centred.

 

You will want to remove this offset and view the code I gave you above and use this to style the normal view of ScrollSpy so that your menu items are centred there too.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny, that worked perfectly. Only had to remove the '-fixed' extension from the spynav ID and all worked well. Thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0