CODEWITHSUNDEEP
zurb-foundation-5magellan
dbigca
dbigca

Reputation: 183

Responsive headers and Magellan's fixed_top option

How do I define different fixed_top values within magellan's options, or css, to accommodate different header heights on various devices? My header height varies from 60px on medium to 120px on large.

The inline nature of Magellan's options trumps all css I use to change this within my media queries.

I have also tried interchange to swap out values to no avail.

Upvotes: 1

Views: 224

Answers (1)

Wouter Klein Heerenbrink
Wouter Klein Heerenbrink

Reputation: 1391

I've had the same problem. Currently there is not really a way to fix this with solely Magellan, for it uses fixed parameters setting the offset. I've applied the following fix:

  1. Remove fixed from the data-magellan-expedition attribute. Magellan will no longer handle the fixed-positioning
  2. Add a 'break point' script that adds classes to the body which you can use to applied media queries. These break point classes are reusable for other applications as well. An example:

Let's say your html is like:

<div data-magellan-expedition class="your-magellan-nav-bar">
  <div data-magellan-arrival="some-header">
    <a href="#some-header">
  </div>
</div>

<!-- ... -->

<h3 data-magellan-destination="some-header">Some Header</h3>
<a name="some-header></a>

Note the missing fixed in data-magellan-expedition="fixed".

Now add some JS to your document:

function activateScrollpoints(scrollPoints) {
  var $window = $(window);
  var $body = $(document.body);
  var tId = null;

  function onScroll() {
    var windowScrollTop = $window.scrollTop();

    scrollPoints.forEach(function(point) {
      $body.toggleClass('break-'+point, windowScrollTop >= point);
    });

    tId = setTimeout(function() {
      clearTimeout(tId);
      window.requestAnimationFrame(onScroll);
    }, 100);
  }

  window.requestAnimationFrame(onScroll);
}

activateScrollpoints([310, 500]);

The above will add a class break-310 once the user scrolls more than 310px and another class break-500 if the user scrolls 310px.

Now in your CSS you could do something like:

@media #{$medium-up} {
   body.break-310 .your-magellan-nav-bar {
      position: fixed;
      top: 310px; /* Some value for your offset */
      left: 0px;
   }
}

@media #{$small-only} {
   body.break-500 .your-magellan-nav-bar {
      position: fixed;
      top: 500px; /* Some value for your offset */
      left: 0px;
   }
}

Upvotes: 0

Related Questions