Menu icon Foundation

My Posts

  • 8
    Replies
  • Sticky Title Bar

    By Nils Wiere

    title-barsticky

    Hello, I'd like to create a sticky Title Bar using Foundation's Sticky plugin. Here's what I got so far, the title bar does not stick. Am I missing something here? Other elements on that website stick as expected. <div data-sticky-container> ... (continued)

    Last Reply by Nils Wiere over 2 years ago






My Comments

Nils Wiere commented on jinch's post over 2 years

Hello Rafi,
Did you add that section to the docs on how to handle the update process? I was just looking for notes on the 6.4 update and couldn't find anything. Would be great to have a few sentences on the process there…
Thanks,
Nils

Nils Wiere commented on Nils Wiere's post over 2 years

Thanks for looking this up, Rafi. So I guess I have to take another route. I thought my setup isn't to uncommon (sticky mobile nav + non-sticky desktop nav), but maybe I took the wrong components (title bar plus top bar).
 
Here's my code example: http://codepen.io/nilswiere/pen/YZpVQL/). 
 
Just let me know in case you have a smart idea on how to make it non-sticky on desktop without repeating code...
 
Thanks again!

Nils Wiere commented on Nils Wiere's post over 2 years

Hi Rafi, but now I'd like to make it stick on small and medium and unstick it on large.
I tried this, but it also sticks on large:
<div class="sticky" data-sticky data-sticky-on="medium down" data-margin-top="0">

Nils Wiere commented on Nils Wiere's post over 2 years

Hi Rafi,
is there a way to make it stick on small and medium only (and not on large up)?

Nils Wiere commented on Nils Wiere's post over 2 years

I just realized, "small only" is working, so everything is fine. Thanks again!

Nils Wiere commented on Nils Wiere's post over 2 years

Hi Rafi,
yep, that's it: with data-sticky-on="small" it works. I was expecting that it sticks on small per default, so I didn't add the small option.
Now, I need to unstick the title bar on medium up. Is there a way to do that?
Thanks,
Nils

Nils Wiere commented on jinch's post almost 3 years

Yes, thanks Rafi – that's sounds great and I think it will help others, too! If you drop a link here, I'll have a look at the beta version of the docs.

Nils Wiere commented on jinch's post almost 3 years

Hi Jinch,
here are some useful migration notes posted by kball:https://github.com/zurb/foundation-sites/releases/
I am using the Sass version together with the Foundation Sites Template and updated yesterday to F6.3.
Here's how:
1. I changed the dependency in bower.json to "foundation-sites": "~6.3.0"
2. Then I entered "foundation update" in the console to update all Foundation assets.
This is convenient so far. However, the next steps required some manual adjustments. There might be a smoother way, and I'd also be interested in a better workflow for this.
3. I took the 6.3 settings.scss, copied it into my projects /scss folder and entered the custom values of my own 6.2 settings.scss file into the new 6.3 settings file.
4. The same goes for the app.scss file. Since I couldn't find the 6.3 version anywhere, I checked out this document and added the new CSS components manually to my own app.scss (card, responsive-embed).
Hope that helps a little.
 
Best,Nils

Nils Wiere commented on Nils Wiere's post almost 3 years

Hi Rafi,
thanks a lot for clarifying! Good to know that you already use Flexbox without notifying bigger issues on IE10+. 
But that means, I have to take care about these IE-specific issues (listed on caniuse.com) by myself, right?

IE 11 does not vertically align items correctly when min-height is used
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
IE 11 requires a unit to be added to the third argument, the flex-basis property
In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

Best and thanks again!
Nils

Nils Wiere commented on Danni's post over 3 years

Hi Danni,

as far as I know, you have to update the _settings.scss file manually (because you do many individual adjustments in there, that shouldn't be overwritten each time you update Foundation).

In the Sass chapter you can view the changes:
https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2

However, there seem to be more changes, listed here:
https://github.com/zurb/foundation-sites/releases/tag/v6.2.0

This only affects updates. When you install a new Foundation project, you should get the 6.2 settings file right away.

Best, Nils

Posts Followed





Following

Followers

My Posts

My Comments

You commented on jinch's post over 2 years

Hello Rafi,
Did you add that section to the docs on how to handle the update process? I was just looking for notes on the 6.4 update and couldn't find anything. Would be great to have a few sentences on the process there…
Thanks,
Nils

You commented on Nils Wiere's post over 2 years

Thanks for looking this up, Rafi. So I guess I have to take another route. I thought my setup isn't to uncommon (sticky mobile nav + non-sticky desktop nav), but maybe I took the wrong components (title bar plus top bar).
 
Here's my code example: http://codepen.io/nilswiere/pen/YZpVQL/). 
 
Just let me know in case you have a smart idea on how to make it non-sticky on desktop without repeating code...
 
Thanks again!

You commented on Nils Wiere's post over 2 years

Hi Rafi, but now I'd like to make it stick on small and medium and unstick it on large.
I tried this, but it also sticks on large:
<div class="sticky" data-sticky data-sticky-on="medium down" data-margin-top="0">

You commented on Nils Wiere's post over 2 years

Hi Rafi,
is there a way to make it stick on small and medium only (and not on large up)?

You commented on Nils Wiere's post over 2 years

I just realized, "small only" is working, so everything is fine. Thanks again!

You commented on Nils Wiere's post over 2 years

Hi Rafi,
yep, that's it: with data-sticky-on="small" it works. I was expecting that it sticks on small per default, so I didn't add the small option.
Now, I need to unstick the title bar on medium up. Is there a way to do that?
Thanks,
Nils

You commented on jinch's post almost 3 years

Yes, thanks Rafi – that's sounds great and I think it will help others, too! If you drop a link here, I'll have a look at the beta version of the docs.

You commented on jinch's post almost 3 years

Hi Jinch,
here are some useful migration notes posted by kball:https://github.com/zurb/foundation-sites/releases/
I am using the Sass version together with the Foundation Sites Template and updated yesterday to F6.3.
Here's how:
1. I changed the dependency in bower.json to "foundation-sites": "~6.3.0"
2. Then I entered "foundation update" in the console to update all Foundation assets.
This is convenient so far. However, the next steps required some manual adjustments. There might be a smoother way, and I'd also be interested in a better workflow for this.
3. I took the 6.3 settings.scss, copied it into my projects /scss folder and entered the custom values of my own 6.2 settings.scss file into the new 6.3 settings file.
4. The same goes for the app.scss file. Since I couldn't find the 6.3 version anywhere, I checked out this document and added the new CSS components manually to my own app.scss (card, responsive-embed).
Hope that helps a little.
 
Best,Nils

You commented on Nils Wiere's post almost 3 years

Hi Rafi,
thanks a lot for clarifying! Good to know that you already use Flexbox without notifying bigger issues on IE10+. 
But that means, I have to take care about these IE-specific issues (listed on caniuse.com) by myself, right?

IE 11 does not vertically align items correctly when min-height is used
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
IE 11 requires a unit to be added to the third argument, the flex-basis property
In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

Best and thanks again!
Nils

You commented on Danni's post over 3 years

Hi Danni,

as far as I know, you have to update the _settings.scss file manually (because you do many individual adjustments in there, that shouldn't be overwritten each time you update Foundation).

In the Sass chapter you can view the changes:
https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2

However, there seem to be more changes, listed here:
https://github.com/zurb/foundation-sites/releases/tag/v6.2.0

This only affects updates. When you install a new Foundation project, you should get the 6.2 settings file right away.

Best, Nils

Posts Followed

Following

Followers

  • No Content