Menu icon Foundation
Setting up Magellan with image on left nav on right

Hi everyone! Zack emailed us a question about Magellan. The answer may help you!

--

I am using Foundation 5. I know about Magellan -- how can I get something like the attached PDF, where there's a corporate logo on the left side, and the buttons on the right? I figured out how to push the buttons to the right using CSS.

I'm trying the following code:

 <div data-magellan-expedition="">

            <h3><a href=""><img src="rigetti-logo.png"/></a></h3>
            <dl class="sub-nav">
              <dd data-magellan-arrival="home"><a href="#home">Home</a></dd>
              <dd data-magellan-arrival="story"><a href="#story">Story</a></dd>
              <dd data-magellan-arrival="about"><a href="#about">About</a></dd>
              <dd data-magellan-arrival="careers"><a href="#careers">Careers</a></dd>
              <dd data-magellan-arrival="contact"><a href="#contact">Contact</a></dd>
            </dl>
          </div>

            

         

the problem with the code snippet I sent is that the logo is also pushed to the right.

Also I'm noticing that when I click on the Magellan links, it doesn't jump exactly to the spot where that destination section starts -- it's jumping to a few lines past the point of the destination.

Magellanstyling

Hi everyone! Zack emailed us a question about Magellan. The answer may help you!

--

I am using Foundation 5. I know about Magellan -- how can I get something like the attached PDF, where there's a corporate logo on the left side, and the buttons on the right? I figured out how to push the buttons to the right using CSS.

I'm trying the following code:

 <div data-magellan-expedition="">

            <h3><a href=""><img src="rigetti-logo.png"/></a></h3>
            <dl class="sub-nav">
              <dd data-magellan-arrival="home"><a href="#home">Home</a></dd>
              <dd data-magellan-arrival="story"><a href="#story">Story</a></dd>
              <dd data-magellan-arrival="about"><a href="#about">About</a></dd>
              <dd data-magellan-arrival="careers"><a href="#careers">Careers</a></dd>
              <dd data-magellan-arrival="contact"><a href="#contact">Contact</a></dd>
            </dl>
          </div>

            

         

the problem with the code snippet I sent is that the logo is also pushed to the right.

Also I'm noticing that when I click on the Magellan links, it doesn't jump exactly to the spot where that destination section starts -- it's jumping to a few lines past the point of the destination.

Rafi Benkual over 5 years ago

Zack,
I created a codepen that should solve this for you. In the css, target the .sub-nav. Also the h3 is causing the nav to drop a line, it can be removed.

http://cdpn.io/BgqbI

The magellan destination does seem to be a few px lower than it should. We'll take a look at that on this open github issue https://github.com/zurb/foundation/issues/2198