CODEWITHSUNDEEP
zurb-foundation-5magellan
perrysetgo
perrysetgo

Reputation: 83

magellan won't adhere to foundation 5 grid

I'm running foundation 5 and using magellan, and try as i might it consistently breaks out of the grid. I'm new to this, any insight would be helpful. When I first load the page, it is positioned correctly inside the grid. As I scroll down, the magellan menu jumps to the left and fills the entire width of the page. I scroll up again, and it does not change (meaning it is still all the way to the left) even though it "unsticks" itself from the top of the browser window. I currently only have it on my localhost testserver. I'm seeing the same problem on firefox and chrome for windows.

Here is my code:

<div class="row">
 <div class="large-10" column>
  <div data-magellan-expedition="fixed">
   <dl class="sub-nav">
    <dd data-magellan-arrival="arrival">
     <a href="#arrival">Arrival</a>
    </dd>
    <dd data-magellan-arrival="destination">
     <a href="#destination">Destination</a>
    </dd>
   </dl>
  </div>
 </div>
 <div class="large-2" column>nothing</div>
  <div class="large-10" column>
   <a name="arrival"></a>
   <span data-magellan-destination="arrival">Arrival</span>
   <a name="destination"></a>
   <span data-magellan-destination="destination">DEstination</span>
  </div>
 <div class="large-2" column>nothing</div>
</div>  <!--closes div class row-->

I'd really appreciate any insight. I've been driving myself crazy with this for way too long. It must be possible - on the docs page it seems magellan stays correctly in the middle column of the grid: http://foundation.zurb.com/docs/components/magellan.html

Upvotes: 1

Views: 239

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

On the docs a left: auto !important has been set for the .fixed class. Even when applying that, your issue is still related to: Fixed position but relative to container (and Position Fixed width 100%).

A possible fix (or something which may help) will be using the following CSS for the large grid:

.fixed {
    background-color:transparent;
    position: fixed;
    left: 50%;
    top: 0%;
    transform: translateX(calc(-41.66% + 30px));
}      
    .fixed .sub-nav {
        background-color:white;
        margin-right: calc(41.66% + 30px);
        padding: 15px;
    }

Upvotes: 0

Related Questions