Jump to content
Sign in to follow this  
fotoramonzi

scrollspy styling issue

Recommended Posts

fotoramonzi    0
fotoramonzi

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: http://twitter.github.io/bootstrap/javascript.html#affix

 

Another good example is here: http://tangorestaurant.com/menus.php

 

 

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,

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
fotoramonzi    0
fotoramonzi

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.

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
fotoramonzi    0
fotoramonzi

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,

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
fotoramonzi    0
fotoramonzi

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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 - http://www.pagelines.com/pros/


Please search our forums, before posting!

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  

  • Similar Content

    • dawsonbarber
      By dawsonbarber+
      I added a background image to a container that has a textbox in it, then added a background overlay.
      The overlay "overlaid" the textbox content as well as the container background image.
      Fixing it was simple enough: I reduced the z-index on .pl-bg-overlay to 0.
    • evscicats
      By evscicats
      I have my site registered and activated.  When I click to add any Free or Pro extensions, I get a message stating package not available.  (see attachment)
       

    • Buishi
      By Buishi
      Hi there,
       
      I'm having the following problem: I set up a scroll spy on my homepage, and put several sections throughout the homepage with .scroll-headers (for example: <h4 class="scroll-header" title="Testimonials">Testimonials</h4>). The problem is, the menu highlighting doesn't change as I scroll, only the last menu item remains highlighted. Any idea what's going on? See here:
       
      http://designmancan.com/CLL/
    • webbdo
      By webbdo+
      I did try a new plugin that did mix up my header and other boxes on site webbdo.com. 
       
      I have fixed the most but I´m not able to fix the header. It´s now follows when scrolling down. I want it to be fixed at the top... How do I enable that, have try several things but do not get it correct.
       
      Where do I manage those settings. I want the shadow (from footer all the way to header top) to follow all the way to the to as well..
    • 5te4
      By 5te4
      How do I change the height of the fixed section? (free version)
×