Archived

This topic is now archived and is closed to further replies.

  • 0

Scroll Spy active menu button display issue


Question

33 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

hmm. is there a workaround to make it work with sections?  I cant imagine that we will be the only ones wanting this since you guys even use it in this fashion all over the pagelines demo site. At least some kind of way to turn off the "active" state?  Having this be functional only within single pages or sections is very limiting.

Share this post


Link to post
Share on other sites

Posted · Report post

Presently, the link originally posted yields a 404 error.

 

ScrollSpy can't be modified to accommodate sections, and certainly we couldn't provide that via technical support.  You can seek one of our developers to create a new product, but I don't even know if they could modify ScrollSpy. There may be some other plugins, but I don't know of any.

Share this post


Link to post
Share on other sites

Posted · Report post

I will alert the developers.  Thanks for letting us know about this.

Share this post


Link to post
Share on other sites

Posted · Report post

sure, if you guys figure out a solution, can you share it here?  thanks

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, we will.

Share this post


Link to post
Share on other sites

Posted · Report post

I tried all of this and it doesn't fix it.

 

Wait a second  - it doesn't even work on Pagelines site - http://demo.pagelines.me/sections/

 

The same issue is evident on their website too. The active button does not display properly.

 

Does anybody have a fix for this? Cheers

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, i have the same problem too...i am using scroll header with the scrollspy section and the "active" state appears always on the wrong place. I think there's is a bug in the Html code cause of the "active" state in the list of the spynav tag....How it is possible to resolve the problem?

At the moment i have the impression that i purchased a not-working section....

 

http://wp.tanzprojekte.ch/wordpress/kurs-info/

Share this post


Link to post
Share on other sites

Posted · Report post

@cpath - There is no bug, as I mentioned in my previous post, the page you linked is also using sections, the markup for scrollspy is inside a ContentBox which has been cloned several times.

ScrollSpy does not work with sections properly, as the active state fails. However, ScrollSpy works perfectly inside the page content like I mentioned on my previous post, there is no bug. It simply wont work correctly with sections when the markup has been added to a ContentBox section.

 

If you wish to have this functionality, you're more than free to contact one of our Pros, like Rob suggested - http://www.pagelines.com/pros/

 

@helvetik_a - You have no content for the ScrollSpy to target from what I can see, please read our documentation which has information on how to correctly use ScrollSpy.

 

http://support.pagelines.me/docs/sections/scroll-spy/

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Posted · Report post

Please let us know how you get on 

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

http://support.pagelines.me/docs/sections/scroll-spy/

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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.

 

http://www.pagelines.com/forum/forum/68-store-products/

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

 

thx

corina

Share this post


Link to post
Share on other sites

Posted · Report post

Hello grstewart2000 

 

Could you take a screenshot of your settings page for Scroll Spy? Also are you using any custom code? 

Share this post


Link to post
Share on other sites

Posted · Report post

Here's the custom code:

 

.navbar .navline > li > a {
font-weight: bold;
}
 
ul.sidebar_widgets{
background:#cccccc;
}
 
#feature_slider .text-bottom .fcontent .fheading {
width:100%;
}
 
#page .content { 
background: rgba(255, 255, 255, 0.9); 
}
 
h1,h2{
line-height: 1em;
}
 
#footer .content{
background: rgba(0, 0, 0, 0.6);
}
 

post-42674-0-17418800-1365430447_thumb.j

post-42674-0-51626500-1365430457_thumb.j

post-42674-0-19218900-1365430467_thumb.j

Share this post


Link to post
Share on other sites

Posted · Report post

On the first menu item of the scroll spy - be sure to close out the div (</div>) 

Share this post


Link to post
Share on other sites

Posted · Report post

OK - made that correction. Issue still present though...

Share this post


Link to post
Share on other sites

Posted · Report post

Hello Martin - any luck with finding a solution? Cheers

Share this post


Link to post
Share on other sites

Posted · Report post

Yes - that header is used for effect.

 

But the issue is that the "Interior Art" button stays highlighted as the active button even after you click the other two buttons.

 

I'm using Scroll Spy on another site that has the same issue as well. Is there a fix for this?

Share this post


Link to post
Share on other sites