I have a website that I am working on and it has a secondary navigation on a few of the pages. It is a sticky nav that takes you to different sections of the page. My goal is to have the background or some visual aspect of the nav link change when it is on its current section of the page. Similar to how the background of the side sticky 'ON THIS PAGE' vertical navigation on the Zurb Foundation Site Docs page does.

I have uploaded an example project file. Just the first 3 links are set up right now. So my goal is when it is in the ABOUT EVAS section the 'About' link changes color or something. Then if the user is in the WHY EVAS section the 'Why Evas' link is visually highlighted in some way.

I would like to accomplish this all within RSD so hoping this can be done with a attribute of some sort, but if an external css file is needed I am open to hearing that solution as well.

Thanks!

P.S. Also thinking I might need to keep each section in its own Row with an id and the data-magellan-target for the entire Row/section as well. Not sure if I'll be triggering by an id or anchor???... but I am willing the switch things up a bit if needed.

You can use some js to add an active class to the link for the current page. area.
Try this
https://css-tricks.com/snippets/jquery/ … ed-on-url/

Thanks Eric! I was considering doing something like that for my main navigation. Also should have mentioned that I am using RSD2b2044 and am building on Foundation. It looks like someone is doing it using only css http://zurb.com/building-blocks/sicky-sidebar-using-magellan

Thought there might be other ways of doing this by maybe using a Foundation Attribute so that I wouldn't have to have a linked in css file. If this was possible I am sure it would be a pretty popular tutorial with the popularity of one page websites.

I do believe this is still using js. It's built into Foundation so you don't have to add it.

Are you just trying to recreate the Magellan navigation component for Foundation, that uses the Sticky plugin?

I have not made one myself, but its discussed here :
http://foundation.zurb.com/sites/docs/magellan.html

Yes, I have the Magellan and Sticky Nav part down. The part I am trying to figure out is I would like the link to be highlighted in some way when it is on that section of the page.
I have been trying to apply the data-active-class to the links but I can't seem to get it to work at all.

Have you ever used the data-active-class attribute? Or know how to get it to work?

I uploaded a project file containing the page I am trying to get this working on in my first post. I also uploaded it to http://dev.lonegrainger.com/rsd/product.html Just the first 3 links About, Why EVAS, and Warranty are working right now. This is also before I tried the data-active-class attribute.

I am not sure if Magellan is working properly. Once I reset backgound colors for the sticky nav, they should be automatically highlighting in that Foundation blue color, but they do not. I also tried changing the targets in your file to columns, and changing the div of the column to a "section" along with changing the ID's to the new column sections.


I created a simple sticky magellan, and can not get the highlighting to work.

Thanks for testing it out BIll!
I think I may have found a solution to doing it with using an external css file. Was hoping to stay in RSD the whole time...

If the external css file works I'll let you know and if I can get it to work by just using RSD i'll post it here as well.

I am starting to think there is a bug. the Magellan javascript is supposed to apply a new class "active" to the link. It is a default class in Foundation with a blue background and white text.

The class is being applied to the link in the html - and I can see that using some web browser developer tools, but no attributes are being applied. There seems to be bug somewhere - because the active class is default for Magellan. I can see the class being changed to link as I scroll, just nothing happens. I can create a link on a page, and give it the class of active, and it will show the default class - so I believe there is an issue with RSD somewhere in the relationships with the css and foundation classes.