Jump to content

Scroll Spy active menu button display issue

Recommended Posts


Hi Danny! Thx for your response. But at this point i do not understand how make work the scroll header section...i was playing around with the css but as you said, it won't work...

what to do? I try now to put some content in the Scrollspy section and let's seewhat happens...

Share this post

Link to post
Share on other sites

The ScrollSpy section has no option for adding content, the content should be on your page/post.


The Scroll Spy section can not be configured using settings or options, as it has none. Instead the section is configured using HTML markup, which is added to the page by the user. Scroll Spy utilises one class .scroll-header and one attribute title="".


When you add these to your page/post content in your HTML, the class and attribute will generate a navigation item in the scrollspy nav.


I recommend you read through the documentation, which has clear instructions on how to use ScrollSpy.



Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Hi Danny. I understand that. But this means that at the end the payed Plugin Scroll Header is useless...

Share this post

Link to post
Share on other sites

You're referring to a completely different product, ScrollSpy isn't Scroll Header. If you have an issue with Scroll Header, I recommend you create a new topic in our store products forum, as Scroll Header is a third party section.



When creating the topic, in the prefix dropdown menu, select the Scroll Header product, this will notify the developer.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

The autor of Scroll Header Pro refers to Scroll Spy and he mention that has to work with it...http://demo.trampanet.net/scroll-header-pro/.

I will open a new topic about this.


By the way is there a possiblity to style the scroll spy navigation with css? i tried so many hours now to change the hover color, the active color etc...




Share this post

Link to post
Share on other sites
James B

Hi Corina


The scrollspy can be tweaked with css. To change the hover, you'll need  to look at the css inside the li like in the example below.


.spynav .nav > li > a:hover

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

Hi James. This is all ok. And i tried that. The problem is not the hover state...it's the active state.

I contacted the developer. Let's see what will happen...

Share this post

Link to post
Share on other sites

Please let us know how you get on 

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 


Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post

Link to post
Share on other sites

Hi Danny. I understand that. But this means that at the end the payed Plugin Scroll Header is useless...


Hello everyone,


As mentioned many times before, Scroll Spy works well with the content (as explained here http://support.pagelines.me/docs/sections/scroll-spy/). But, with sections in content area and page template, it messes up active state of menu items. That is not an issue (per se), because Scroll Spy was not meant to work with sections in the first place.


Scroll Header Pro is a section that enables users to insert ScrollSpy-ready stylized Headers between sections. It has .scroll-header class and title=”” parameter implemented and enabled by default. (which is the same configuration scroll spy uses)


SHP cannot fix ScrollSpy to work properly with sections. It provides less fix for default ScrollSpy template: removes active styles and fixes hover and active->hover.


Here is the code http://paste.pagelines.com/08d

and CSS variant http://paste.pagelines.com/5o3


ScrollSpy uses color variables in its less file http://demo.pagelines.me/cheat-sheet/, so SHP less fix works with them too.


if you want to change the style of Scroll Spy, fell free to use code above as starting point.

Other way is to set higher specificity to your custom less/css, for example:  section#scrollspy or #page section#scrollspy .

Hope this helps.


professional dms plugins 


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

  • Similar Content

    • 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:
    • Brian
      By Brian+
      When using scroll spy, does anyone know the code to change colors for the background, link text color, and then when a selected link is active? Exactly how it's being setup here: http://www.pagelines.com/shop/club/dms/
    • helvetik_a
      By helvetik_a
      Hi. I try to style the scroll spy section with a different hover color and a transparent bg.
      The css does not work at all....i am using firebug, but if i copy the code in the pagelines customisation plugin it does not works at all....
      This is the css code: (from Firebug  and modified... http://paste.pagelines.com/151
      The hover state remains always in grey....any help?
      THX Corina
    • achif
      By achif
      I've tried different ways to center the navbar generated with scrollspy section but nothing works.
      please help. thanks.
    • josh1178
      By josh1178
      I've been away from Pagelines for a while now. I came back and was very impressed with all the new features and the new web design.

      But then, as I dig around further I notice that things are still a mess.

      For example:
      Scroll Spy - I'd like to know what it is and how to use it.

      I go to: http://demo.pagelines.me/sections/ to get a feel for what it is
      The description mentions unicorns and spies in an effort to be cute
      While cute, it's not helpful and quickly becomes frustrating when you read the 'explanation'


      .scroll-header is the class that triggers the scrolling. The class can be added to any element, and is not restricted to headings.
      Ok great. But what the heck is Scroll Spy?
      Let's look it up in the pagelines documentation:
      So, I go to: http://www.pagelines.com/wiki/Main_Page
      I click on How to Use ScrollSpy:
      In PageLines Framework 2.2, we have added a new Section called ScrollSpy. The ScrollSpy section adds an additional navigation bar that automatically updates nav targets based on scroll position. It is also useful for jumping from one section of your page to another instantly.
      Great, a practical definition!
      Let's look at the images. Wait, why do all the images say "

      Placeholder image for ScrollSpy Content sreenshots"

      Wait, scroll down a bit and there is Latin!
      Integer pharetra, tortor nec volutpat accumsan, ligula enim consectetur erat, porta imperdiet felis orci eget purus. Phasellus non auctor magna. Vestibulum at augue sit amet quam scelerisque rutrum. Aliquam erat volutpat. Cras lectus dolor, tincidunt laoreet molestie ac, vehicula sed ante.
      So, I hunt around for more info on the page and find these this:
      ScrollSpy works within your Page's editor, as long as ScrollSpy is enabled on the template your page is using. For a more in depth look and tutorial on how to get ScrollSpy working on your page, please visit the new PageLines Framework 2.2 Demo Site.
      But that link goes here!
      I find some more links that say:
      In order to get ScrollSpy working on your page, it needs to be enabled in the Drag and Drop menu, and in the Template Setup area.
      More info on template setup here
      I click that and it takes me to a page that says:

      Redirect page

      How to use Drag & Drop


      You guys really need to get it together. I just wanted a picture and definition of what the ScrollSpy section does. Next time I'll google it or just post to the forum or try to figure it out on my own, because the documentation/wiki is an obvious afterthought. Or maybe I'm supposed to buy Pagelines plus to deal with the headache?

      The attribute title="Usage" is used as the actual label that sits inside the menu.