Menu icon Foundation
Magellan as side-nav

Hi Folks,

I managed to set a sticky side-nav that uses Magellan, but instead of staying in its columns on the left, it overlaps the whole page width like in the image below

Screen shot 2014 10 03 at 12.42.02

Here's the code :

<div class="content">

	<div class="row">
    
		<div class="medium-3 columns">
        
			<div class="magellan-container" style="" data-magellan-expedition="fixed" data-options="destination_threshold:65;throttle_delay:0;">
			  
              <ul class="side-nav">
				
                <li data-magellan-arrival="virtual" class=""><a href="#virtual">Virtual Advisor</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="showcase" class=""><a href="#showcase">Product Showcase</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="surveys" class=""><a href="#surveys">Surveys & Contest</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="sales" class=""><a href="#sales">Sales Support</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="menu" class=""><a href="#menu">Interactive Menu</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="proto" class=""><a href="#proto">App Prototyping</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="book" class=""><a href="#book">Interactive Book</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="training" class=""><a href="#training">Training Tool</a></li>
			  
    		      
			  </ul>
			
    		    
			</div>						
		
    	    
		</div>
		
        <div class="medium-9 columns">
			
            <div class="row">
				
                <div class="twelve columns">
					
                    <div style="height:500px;">
						<a name="virtual"></a>
						<h2 data-magellan-destination="virtual">Virtual Advisor</h2>
					</div>

                    <!-- AND SO ON -->





Please advise..

I tried so many things without success... :(

EDIT:

Also, when I scroll all the way to my footer, the nav overlaps the footer like so :

Screen shot 2014 10 03 at 14.33.24

How can I prevent this to happen? Is there a way to make the side-nav stick to the bottom of its container as it reaches it?

Please advise! :(

Magellanside-navstickynavleft

Hi Folks,

I managed to set a sticky side-nav that uses Magellan, but instead of staying in its columns on the left, it overlaps the whole page width like in the image below

Screen shot 2014 10 03 at 12.42.02

Here's the code :

<div class="content">

	<div class="row">
    
		<div class="medium-3 columns">
        
			<div class="magellan-container" style="" data-magellan-expedition="fixed" data-options="destination_threshold:65;throttle_delay:0;">
			  
              <ul class="side-nav">
				
                <li data-magellan-arrival="virtual" class=""><a href="#virtual">Virtual Advisor</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="showcase" class=""><a href="#showcase">Product Showcase</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="surveys" class=""><a href="#surveys">Surveys & Contest</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="sales" class=""><a href="#sales">Sales Support</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="menu" class=""><a href="#menu">Interactive Menu</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="proto" class=""><a href="#proto">App Prototyping</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="book" class=""><a href="#book">Interactive Book</a></li>
				<li class="divider"></li>
				<li data-magellan-arrival="training" class=""><a href="#training">Training Tool</a></li>
			  
    		      
			  </ul>
			
    		    
			</div>						
		
    	    
		</div>
		
        <div class="medium-9 columns">
			
            <div class="row">
				
                <div class="twelve columns">
					
                    <div style="height:500px;">
						<a name="virtual"></a>
						<h2 data-magellan-destination="virtual">Virtual Advisor</h2>
					</div>

                    <!-- AND SO ON -->





Please advise..

I tried so many things without success... :(

EDIT:

Also, when I scroll all the way to my footer, the nav overlaps the footer like so :

Screen shot 2014 10 03 at 14.33.24

How can I prevent this to happen? Is there a way to make the side-nav stick to the bottom of its container as it reaches it?

Please advise! :(

wlc almost 5 years ago

You forgot to add the "large-3" class to your column.

Eric Dumensil almost 5 years ago

I'm not sure to understand, having medium-3 isn't enough??

wlc almost 5 years ago

Not since Foundation 5. You have to account for all 3 sizes in most cases.

John Moore almost 5 years ago

I had the same issue. When the class fixed is added, the expedition goes full width of screen. I found a solution in the forums that worked for me.

http://foundation.zurb.com/forum/posts/13831-fixed-sidebar

In foundation.magellan.js, make this alteration around line 120...

 // Adding dynamic inherited width to keep menu in sidebar
// expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');
expedition.css({position:'fixed', top: settings.fixed_top, minWidth: 0, width: expedition.outerWidth() + 'px'});

With that code, instead of adding the class fixed, it sets the css width to keep it in the sidebar.

Jason Li over 4 years ago

Hey – rather than modifying the base Foundation JS files (which would break any time you updated Foundation as a whole), also consider these JS plug-in solutions that are a) easy to use, and b) offers more options:

http://leafo.net/sticky-kit/
http://mojotech.github.io/stickymojo/

(I say this because I used the above solution, but then when I switched over to Foundation SASS, failed to get it to work... and lo and behold, these JS plug-ins work better anyway! :))

Rafi Benkual over 4 years ago

@wlc

You can use just medium-6 and the large grid will inherit that size. The framework is mobile first so you can specify small-6 only any medium and large will also inherit this.

Rafi Benkual over 4 years ago