Menu icon Foundation

My Posts

No Content

My Comments

William Bernoudy commented on Akshay's post almost 5 years

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.

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Akshay's post almost 5 years

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.

Posts Followed

Following

  • No Content

Followers

  • No Content