Help with adding more links to TopBar (using Magellan nav)


(Dan M) #1

OK so I’m waiting for my duh moment here. This has to be a simple answer…but I’m going in circles. I’ve looked here and on the web at large and haven’t been able to find this answer. I know it has to be out there so feel free to just point me that direction.

I’m using Joe Workman Foundation (and Foundation Stacks) and wanting to use TopBar and Magellan markers for my nav. I understand the concept of markers etc, and have it working with the existing three default links that appear in TopBar when I select the TopBar menu to be Magellan (see pics). When I try to add another line of code for another Magellan link (say Marker4 in this case) it doesn’t work. I’ve tried combining with the Magellan setup stack (thinking I had to add items there) with no luck. What am I missing? Please supply me with my Duh moment of the day :slight_smile:

(scott williams) #2

So just to be clear “doesn’t work” means it doesnt show up in Topbar or it doesn’t go to the marker when clicked?

(Jerome) #3

It seems to be correct (if your marker’s name is “marker4” for sure), but you must have a large height last stacks at the end of your page, put some long text and try again, it can be just that.

If you have not enough height place at the end, you are not able to go to your last marker.

(Hope you understand me, bad english)


(Robert Ziebol 🖖🏼) #4

Also, do you have a 4th Magellan Marker in your page and is it called marker4??

(Dan M) #5

Great point. Using the “marker 4” example…the title shows up dramatically mis-styled from the other items (markers 1-3) in the menu. The link is not active (i.e. no cursor change on hover etc), and does not “go” to my marker 4 marker. Hope that helps. In short no aspect works.

Great points Jerome and Zeebe. However, my page is tall enough for the scroll to occur and I do in fact have a correctly named marker 4 in my layout.

For another bit of the mystery. If I copy and paste the existing code (that contains markers 1-3) they appear in duplicate, and function in duplicate. For instance I would have six links (1-3 and 1-3) that all work and display as they should. If I change the numbers in the exact code that I’ve copied (3 to 4 for instance) that item that I’ve changed reverts to the non-functional behavior described above.

(scott williams) #6

Okay, now that’s odd.
Could you publish it as a test somewhere so we can see what’s going on?

(Dan M) #7

Here’s a hosted example.

(scott williams) #8

not sure what’s going on there but the quotes look messed up in the HTML

<li data-magellan-arrival="marker4’&gt;&lt;a href=" #marker4’="">Marker 4</li>

should look like this:

<li data-magellan-arrival="marker3"><a href="#marker3">Marker 3</a></li>

Looks like the dreaded “Curly Quote” problem

Delete marker 4 from top bar
copy and paste marker3 and just change the 3’s to 4’s
I’ll bet that fixes it

(Dan M) #9

Well I’ve figured it out…Scott your suggestion to post an example made me stumble upon it. Turns out the issue is “smart quotes”. It’s actually documented elsewhere on this site…but I ignored it because I was not touching the quotes in the code. Turns out my Mac was making the quotes smart (curly) without me even touching them. I noticed in my code (that you just posted) that the quote after the 4 is curly and not straight (brought to mind the other topic here I had seen). I took my code into TextWrangler to format it and changed the " curly ’ " to a " straight ’ " and voila. Believe it or not that’s it. I’ve updated my example site to show the results. Thanks for the help all.

For others…here is the other thread that discusses it.

(Dan M) #10

Hey zebee just noticed you were the one who solved the original thread…I guess I owe you a thanks :grin:

(Dan M) #11

Scott my apologies…just noticed you also mentioned the dreaded curly quotes (credit where credit is due). Thanks. :slight_smile:

(scott williams) #12

Ha, Glad its sorted for you.