Jump to content


Photo
- - - - -

scrollspy styling issue

scrollspy fixed position-fixed vertical-menu

  • Please log in to reply
7 replies to this topic

#1 fotoramonzi

fotoramonzi

    Member

  • Members

  • 13 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 12 April 2013 - 06:07 PM

Hello, I'm working on a restaurant website and I would like the menu page to have a vertical navigation that scrolls with the content. Basically, I want the menu to work exactly like bootstrap's affix javascript. Check it out here:

Please Login or Register to see this Hidden Content

 

Another good example is here:

Please Login or Register to see this Hidden Content

 

 

I know that pagelines has included a lot of bootstrap's library but I'm assuming that affix was left out because of the scroll spy section. Which leads me to my next question. Is there a way to style the scrollspy section so it behaves like the vertical menus in the pages that I provided links for?

 

Thanks,



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 08:52 PM

Hi there,

 

The scrollspy code has been amended to be included as a section within the framework, but this option hasn't been included as default. You might be able to get a plugin which will add the scroll spy effect to a vertical navigation, otherwise you'd need to look into coding a custom section using the core bootstrap code to get that effect.



#3 fotoramonzi

fotoramonzi

    Member

  • Members

  • 13 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 12 April 2013 - 09:34 PM

Thanks for the reply :)

 

I just installed the twitter bootstrap wordpress plugin (which includes the affix.js) and am going to see if I can get the results I'm looking for.

 

Yes, down the line it would be nice to give the scroll spy section a vertical, fixed position relative to the parent element option. I believe a lot of people would find that very useful.



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 10:13 PM

You're welcome.

 

Lots of the developer team are currently working on new custom sections for the framework, I'll drop this in as a suggestion.



#5 fotoramonzi

fotoramonzi

    Member

  • Members

  • 13 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 15 April 2013 - 10:48 AM

Ok so I installed the twitter bootstrap wordpress plugin and applied the affix.js to an element. I noticed that the affix functionality breaks if a section is placed in either the forefoot or footer areas. So I'm assuming that pagelines sections screw with browser window heights somehow? Is this a possible bug? Can you think of a workaround?

 

Thanks,



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17636 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 April 2013 - 11:07 AM

I don't think this is a bug to be honest, what I think is happening is a nothing more than a conflict, as we have already implemented most of Bootstrap into PageLines. Then you install a plugin for Bootstrap.

James has already brought this suggestion to our development team.



#7 fotoramonzi

fotoramonzi

    Member

  • Members

  • 13 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 15 April 2013 - 11:36 AM

There's definitely a conflict but it has to be something other than the wordpress bootstrap plugin since I removed that plugin and am still facing the same issue.

 

What I mentioned to James (which he kindly suggested) was to implement a vertical option to the scroll spy section. That would make what I'm trying to do so much easier.

 

While I'm waiting for that functionality to (hopefully) be added to pagelines, I went ahead and created my own sidenav that utilizes bootstraps affix functionality which, as it turns out, is indeed included in the Bootstrap js that you guys added to Pagelines. As I just mentioned, the affix function works fine until a section (forefoot, content, hero, etc…) is added in the morefoot and/or footer areas.

 

I've tried messing with the CSS and found that the functionality also works if I change div.texture position to absolute. However, that totally screws the page layout and makes my site looks like crap. Unfortunately, I desperately need this particular functionality to finish my already late project or else I would have gave up on this a week ago. 

 

Any help or guidance would be greatly appreciated



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17636 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 April 2013 - 11:44 AM

From what I can tell this functionality hasn't been added, as Bootstrap doesn't contain sidebars such as Wordpress. This makes adding a fixed position sidebar navigation much simpler.

 

It may be for that reason why this hasn't been included in PageLines Framework, I will try to find out more information regarding this and as soon as I do, I will reply here.

 

However, I think the best course of action would be to contact one of our Pros for assistance -

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: scrollspy, fixed, position-fixed, vertical-menu