Menu icon Foundation
Magellan goes full width i.e, screen size rather than column

I am using magellan and it goes full width of the screen rather that staying within the column size

Magellan

I am using magellan and it goes full width of the screen rather that staying within the column size

Karl Ward over 5 years ago

This is not really related to Magellan. When you set a menu to be fixed (eg. stick on screen regardless of scroll), basically it detaches itself from within the columns. If you need it to take a specific width when it goes sticky, you will need to apply a CSS style to it ... something like this:

.yourElement.fixed {
   width: 25%;
}

... or just set a static pixel-based width. If you need complex behavior, you can use columns within your fixed element, but I am not sure I would wanna walk that path ...

alfonso bozzelli about 5 years ago

Try this

[data-magellan-expedition] {
    left: auto !important;
}

EDIT:
As suggested by Karl, I think this is better:

#yourmenuid.fixed > .sub-nav{
 width:rem-calc(1000);
  margin:0 auto;
}

Clint Hubbard Jr about 5 years ago

I had a similar issue and had to do the following...

[data-magellan-expedition] {
  left: auto !important;
}

#sticky-subnav.fixed{
   min-width:0;
   width: auto;
  margin:0 auto;
}

Jay Merritt almost 5 years ago

Can anyone help me out here?
Having the same problem.

http://resolvd.it/trailhouse/magtest.html

Thank you

Kris Livingstone almost 5 years ago

Here's what worked for me:

Solved two of my issues (actually worked out better accidentally). Magellan sticky now shows up full width and covers the sticky top bar when scrolling.

Tiny custom CSS and no change to the Magellan HTML.

[data-magellan-expedition] {
     left: 0px;
     z-index: 500;
}

William Bernoudy almost 5 years ago

I'm not sure this is the cleanest fix, but here's what I did.

Here's the HTML:

<div data-magellan-expedition="fixed" id="magellan_bar"> 
...
</div>

Firstly, I noticed that when the clone of the Magellan bar is created, it has a min-width value of 100%, which is not good if you don't want it to pop out. So the first thing I did is set the min-width to 0:

#magellan_bar {
  min-width: 0;
}

After this it still expands, so I fixed that with a max-width. This needs to be equal to the overall row width minus the column gutter, both of which are set in _settings.scss. In other words, it just needs to be equal to the max-width of the Magellan bar before it gets fixed at the top.

#magellan_bar {
  min-width: 0;
  max-width: $row-width - $column-gutter;
}

Now, as long as your screen is wider than the $row-width, this works well. However, when the screen is smaller than this value, the Magellan bar will pop out on the right side to the full width of the screen, which isn't a huge deal, but is still not perfect. To fix this, I had to adjust the fixed positioning for the fixed Magellan, but only when the screen size is smaller than your $row-width.

#magellan_bar {
  min-width: 0;
  max-width: $row-width - $column-gutter;
  @media only screen and (max-width: $row-width) {
    width: auto;
    left: $column-gutter/2;
    right: $column-gutter/2;
  }
}

This setup seems to be working for me. If you're not using Sass, then you'll have to substitute $row-width and $column-gutter for the default values, which I believe are 1000px and 30px, respectively.