Menu icon Foundation

Designer | Gettysburg, OH

I run a small design company.

My Posts


My Comments

Jason Adams commented on Travis Fulton's post over 3 years

Yes, the linked changes I posted earlier were a final commit for this issue in 6.1.2

Jason Adams commented on Lee Feintsein's post over 3 years

Okay, I think there was a miscommunication, I'm sorry.

Here's what I think you are going for:
1. You have your top-bar positioned on the page somewhere other than the very top.
2. Once the user scrolls down to the area of where the top-bar is located, the top-bar will stick to the top of the page.
3. Your background color of the top-bar will expand to the full width of the page, while the items within the top-bar are constrained to the grid.

If that's what you're after, then look at the following example.

It's best to use the power of Panini with F6 to accomplish this. You will see a lot of in-line data options set for the top-bar, which may seem bloated, but it actually reduces a lot of time spent prototyping as you can quickly reposition the top-bar by changing the data elements for your top-bar with different div IDs.

To prepare you, you will need to define div IDs within your page that the header will stick to.

Create a partial for your header, located at ../src/partials and titled header.html:

<div data-sticky-container>
    <div class="small-12 sticky" data-sticky data-margin-top="0" data-margin-bottom="0" data-top-anchor="testNav:bottom" data-btm-anchor="contentBottom">
        <nav class="top-bar">
            <div class="row">
                <div class="top-bar-left">
                    <ul class="dropdown menu">
                        <li class="menu-text">Company</li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div class="top-bar-right">
                    <ul class="menu">
                    <li><button type="button" class="button">Button</button></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

Notice the important bits are data-top-anchor="testNav:bottom" and data-btm-anchor="contentBottom". You will need to customize these anchor points and match them to div IDs you've defined on your page, located in ../src/pages/***.html.

I placed by testNav id after an introductory banner at the top of the page. The top-bar is attached to the bottom of this 300px height banner. When you scroll past the bottom of the banner, the top-bar sticks.

But it's import to also put a contentBottom div ID somewhere at the bottom of your page. I just placed a generic div below most of my footer content to ensure that the top-bar persists no matter how far down the user scrolls.

I'm not sure how important this is, but I also created a partial for my banner, then in my default layout (../src/layouts/default.html) I placed my header below the banner, like this:

  <body>

    {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
    {{> testbanner}}
    {{> header}}
    {{> body}}

    <script src="{{root}}assets/js/app.js"></script>
  </body>

It may seem like a lot of extra work, but the real power comes when you need to make another prototype and can easily change the top-bar location. Another nice thing about this is that you can anchor the bottom of this top-bar to an element midway, and thus you can stick elements to the top of the page and replace them as the user continues to scroll down.

Jason Adams commented on Lee Feintsein's post over 3 years

Alright, i'm back in the office. Here's the code that should make it replicate the F5 top-bar with grid-contained elements and a full-width background:

<div data-sticky-container>
    <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
        <nav class="top-bar">
            <div class="row">
                <div class="top-bar-left">
                    <ul class="dropdown menu">
                        <li class="menu-text">Company</li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div class="top-bar-right">
                    <ul class="menu">
                    <li><button type="button" class="button">Button</button></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

The best way to think about this/remember is to set everything up in a logical order.
1. The whole top bar need to be sticky, so establish this first by "setting the tone".
2. The next level div is what attributes the sticky class to your whole top bar. But we want to have a "fixed" top bar. Easy, just force the sticky class to initiate at page-load by establishing a marginTop that already hits the top of the user's browser at 0.
3. With the next level div, we need to import all the styles of a top-bar. So this is where you put the "top-bar" class. Now we will have a full-width background.
4. Set up a generic row as the next level div. This will now limit any content you place in your top-bar to the constraints of your grid width.
5. Place all of your content and wrap all your divs!

Jason Adams commented on Lee Feintsein's post over 3 years

I struggled with this earlier today. If I understand correctly, you are trying to replicate the "contain-to-grid" class from F5? That's when the bar stretched to the width of the window while the items of your navigation stayed within the constraints of your design area.

I'm not on my workstation, but my AHA! moment to do this in F6 was wrapping my whole menu within a simple "row" class. Nothing else. So I replaced your "row expanded" line with all the extra in-line styling with just that. If this doesn't work, try placing the "row" div above the data-sticky-container. I'm sorry I can't remember.

Also, I changed your grid size to small-12 rather than large-12. Just a good habit to get into for mobile-first design.

EDIT: See my next post for the correct code!

Deleted

Jason Adams commented on Travis Fulton's post over 3 years

Alright, as referenced in another post on this forum, this issue has been fully addressed to the best of gulp 3's ability. Aside from a minor warning of a depricated 'run' call, not only does this fix address the load issue of partials, but it also deals with the race condition of reloading the browser prior to the parsing of changes AND adds a few other directories and files to the watchlist.

https://github.com/zurb/panini/issues/10

Although the fix I posted earlier today still works, the linked issue to github will have a link to updated javascript for the file I referenced earlier.

Thanks to all the users both here and github who managed to fix this issue in only a few hours of me asking about it!!

Jason Adams commented on Travis Fulton's post over 3 years

User simonh1000 at github has come up with a stopgap solution so far. All credit goes to him: https://github.com/simonh1000

In your project folder, open the 'gulpfile.js' file.

Find the line:

gulp.task('pages', function() { 

add this line directly underneath, just before the return function:

 panini.refresh();

Then, toward the bottom of this file are all of the gulp tasks that initiate. You want to edit the watch for your layouts,partials from:

 gulp.watch(['src/{layouts,partials}/**/*.html'], ['pages:reset', 'reload']);

To this:

   gulp.watch(['src/{layouts,partials}/**/*.html'], function() {
  sequence([
        'pages',
        'reload'
        ]);
  });

This will effectively eliminate the need for the 'pages:reset' function defined early in the template, but I tried it today and it worked...

Jason Adams commented on Travis Fulton's post over 3 years

Apparently there are internal issues with this involving Panini. This was brought up on Panini's github page as a comment from one of the developers today: https://github.com/zurb/panini/issues/10

Jason Adams commented on Travis Fulton's post over 3 years

I am experiencing the same issues.

At first I thought I could rectify the issue by doing a massive overhaul of my workflow.

Specs before overhaul:
Windows 10 | Chrome Version 47.0.2526.111 m | node v0.12.7 | npm 2.11.3 | foundation-cli 2.0.2

I made sure to upgrade/uninstall everything as outlined in their respective documentation. After I set everything up and reinstalled the new Foundation CLI, I create a new project. Then I make a template utilizing the {{> header}} Handlebars syntax. I create an html file "header.html" in the /partials subdirectory. That file contains just the html necessary for my header.

I have the foundation cli running and watching my project. Browsersync shows that it updates, but the html from header.html is not compiled. I check the generated html source file to be sure and it does not show. Changes made to index.html occur immediately. Changes to header.html or the default.html template do not compile at all.

I was very excited to try Foundation 6 after developing with Foundation 5 for so long. I hope this issue can be fixed soon...

Specs after overhaul (** indicates a change):

Windows 10 | Chrome Version 47.0.2526.111 m | **node v5.4.1 | **npm 3.5.3 | foundation-cli 2.0.2

I've been working to fix this for over 4 hours now. The benefit of consolidating the workflow to just a foundation cli is a logical next step for Foundation, and using a leaner modular-based "partials" system that doesn't require a hulky CMS is very much welcome. But Panini is not compiling anything after the first or second change.

I am going to try and create a stand-alone Panini project and see if I can't replicate the issues. Then I guess I'll start digging into the Foundation source files for mistranslated Panini code...

Surely there must be more people having this issue?

Jason Adams commented on Jason Adams's post about 4 years

Simply adding a top-margin alone does not fix the issue. However, adding the start_offset will likely require a top-margin to be set that matches the px entered there.

Jason Adams commented on Jason Adams's post about 4 years

I may have fixed this, but only as a work-around, not the real issue. The solution I found was that when the topbar reaches the top of the viewport, the topbar javascript changes its class from "sticky" to "fixed". So, in custom.scss I can just style ".permafix.fixed" to have the new margin-top of the height of the fixed content, then add a simple transition of 1s. This has a solid effect and possibly better than my question requests.

However, I am still curious to see if it's possible to trigger the "sticky" to "fixed" class switch before the top of the viewport is reached?

Thank you.

.permafix {
     margin-top: 0;
}

.permabar {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       margin-top: 0;
       margin-bottom: 0;
       max-width: 71.25rem;
}

.right {
     text-align: right;
}

.permafix.fixed {
     margin-top: 45px;
     -webkit-transition: 1s;
     transition: 1s;
}

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Travis Fulton's post over 3 years

Yes, the linked changes I posted earlier were a final commit for this issue in 6.1.2

You commented on Lee Feintsein's post over 3 years

Okay, I think there was a miscommunication, I'm sorry.

Here's what I think you are going for:
1. You have your top-bar positioned on the page somewhere other than the very top.
2. Once the user scrolls down to the area of where the top-bar is located, the top-bar will stick to the top of the page.
3. Your background color of the top-bar will expand to the full width of the page, while the items within the top-bar are constrained to the grid.

If that's what you're after, then look at the following example.

It's best to use the power of Panini with F6 to accomplish this. You will see a lot of in-line data options set for the top-bar, which may seem bloated, but it actually reduces a lot of time spent prototyping as you can quickly reposition the top-bar by changing the data elements for your top-bar with different div IDs.

To prepare you, you will need to define div IDs within your page that the header will stick to.

Create a partial for your header, located at ../src/partials and titled header.html:

<div data-sticky-container>
    <div class="small-12 sticky" data-sticky data-margin-top="0" data-margin-bottom="0" data-top-anchor="testNav:bottom" data-btm-anchor="contentBottom">
        <nav class="top-bar">
            <div class="row">
                <div class="top-bar-left">
                    <ul class="dropdown menu">
                        <li class="menu-text">Company</li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div class="top-bar-right">
                    <ul class="menu">
                    <li><button type="button" class="button">Button</button></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

Notice the important bits are data-top-anchor="testNav:bottom" and data-btm-anchor="contentBottom". You will need to customize these anchor points and match them to div IDs you've defined on your page, located in ../src/pages/***.html.

I placed by testNav id after an introductory banner at the top of the page. The top-bar is attached to the bottom of this 300px height banner. When you scroll past the bottom of the banner, the top-bar sticks.

But it's import to also put a contentBottom div ID somewhere at the bottom of your page. I just placed a generic div below most of my footer content to ensure that the top-bar persists no matter how far down the user scrolls.

I'm not sure how important this is, but I also created a partial for my banner, then in my default layout (../src/layouts/default.html) I placed my header below the banner, like this:

  <body>

    {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
    {{> testbanner}}
    {{> header}}
    {{> body}}

    <script src="{{root}}assets/js/app.js"></script>
  </body>

It may seem like a lot of extra work, but the real power comes when you need to make another prototype and can easily change the top-bar location. Another nice thing about this is that you can anchor the bottom of this top-bar to an element midway, and thus you can stick elements to the top of the page and replace them as the user continues to scroll down.

You commented on Lee Feintsein's post over 3 years

Alright, i'm back in the office. Here's the code that should make it replicate the F5 top-bar with grid-contained elements and a full-width background:

<div data-sticky-container>
    <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
        <nav class="top-bar">
            <div class="row">
                <div class="top-bar-left">
                    <ul class="dropdown menu">
                        <li class="menu-text">Company</li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div class="top-bar-right">
                    <ul class="menu">
                    <li><button type="button" class="button">Button</button></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

The best way to think about this/remember is to set everything up in a logical order.
1. The whole top bar need to be sticky, so establish this first by "setting the tone".
2. The next level div is what attributes the sticky class to your whole top bar. But we want to have a "fixed" top bar. Easy, just force the sticky class to initiate at page-load by establishing a marginTop that already hits the top of the user's browser at 0.
3. With the next level div, we need to import all the styles of a top-bar. So this is where you put the "top-bar" class. Now we will have a full-width background.
4. Set up a generic row as the next level div. This will now limit any content you place in your top-bar to the constraints of your grid width.
5. Place all of your content and wrap all your divs!

You commented on Lee Feintsein's post over 3 years

I struggled with this earlier today. If I understand correctly, you are trying to replicate the "contain-to-grid" class from F5? That's when the bar stretched to the width of the window while the items of your navigation stayed within the constraints of your design area.

I'm not on my workstation, but my AHA! moment to do this in F6 was wrapping my whole menu within a simple "row" class. Nothing else. So I replaced your "row expanded" line with all the extra in-line styling with just that. If this doesn't work, try placing the "row" div above the data-sticky-container. I'm sorry I can't remember.

Also, I changed your grid size to small-12 rather than large-12. Just a good habit to get into for mobile-first design.

EDIT: See my next post for the correct code!

Deleted

You commented on Travis Fulton's post over 3 years

Alright, as referenced in another post on this forum, this issue has been fully addressed to the best of gulp 3's ability. Aside from a minor warning of a depricated 'run' call, not only does this fix address the load issue of partials, but it also deals with the race condition of reloading the browser prior to the parsing of changes AND adds a few other directories and files to the watchlist.

https://github.com/zurb/panini/issues/10

Although the fix I posted earlier today still works, the linked issue to github will have a link to updated javascript for the file I referenced earlier.

Thanks to all the users both here and github who managed to fix this issue in only a few hours of me asking about it!!

You commented on Travis Fulton's post over 3 years

User simonh1000 at github has come up with a stopgap solution so far. All credit goes to him: https://github.com/simonh1000

In your project folder, open the 'gulpfile.js' file.

Find the line:

gulp.task('pages', function() { 

add this line directly underneath, just before the return function:

 panini.refresh();

Then, toward the bottom of this file are all of the gulp tasks that initiate. You want to edit the watch for your layouts,partials from:

 gulp.watch(['src/{layouts,partials}/**/*.html'], ['pages:reset', 'reload']);

To this:

   gulp.watch(['src/{layouts,partials}/**/*.html'], function() {
  sequence([
        'pages',
        'reload'
        ]);
  });

This will effectively eliminate the need for the 'pages:reset' function defined early in the template, but I tried it today and it worked...

You commented on Travis Fulton's post over 3 years

Apparently there are internal issues with this involving Panini. This was brought up on Panini's github page as a comment from one of the developers today: https://github.com/zurb/panini/issues/10

You commented on Travis Fulton's post over 3 years

I am experiencing the same issues.

At first I thought I could rectify the issue by doing a massive overhaul of my workflow.

Specs before overhaul:
Windows 10 | Chrome Version 47.0.2526.111 m | node v0.12.7 | npm 2.11.3 | foundation-cli 2.0.2

I made sure to upgrade/uninstall everything as outlined in their respective documentation. After I set everything up and reinstalled the new Foundation CLI, I create a new project. Then I make a template utilizing the {{> header}} Handlebars syntax. I create an html file "header.html" in the /partials subdirectory. That file contains just the html necessary for my header.

I have the foundation cli running and watching my project. Browsersync shows that it updates, but the html from header.html is not compiled. I check the generated html source file to be sure and it does not show. Changes made to index.html occur immediately. Changes to header.html or the default.html template do not compile at all.

I was very excited to try Foundation 6 after developing with Foundation 5 for so long. I hope this issue can be fixed soon...

Specs after overhaul (** indicates a change):

Windows 10 | Chrome Version 47.0.2526.111 m | **node v5.4.1 | **npm 3.5.3 | foundation-cli 2.0.2

I've been working to fix this for over 4 hours now. The benefit of consolidating the workflow to just a foundation cli is a logical next step for Foundation, and using a leaner modular-based "partials" system that doesn't require a hulky CMS is very much welcome. But Panini is not compiling anything after the first or second change.

I am going to try and create a stand-alone Panini project and see if I can't replicate the issues. Then I guess I'll start digging into the Foundation source files for mistranslated Panini code...

Surely there must be more people having this issue?

You commented on Jason Adams's post about 4 years

Simply adding a top-margin alone does not fix the issue. However, adding the start_offset will likely require a top-margin to be set that matches the px entered there.

You commented on Jason Adams's post about 4 years

I may have fixed this, but only as a work-around, not the real issue. The solution I found was that when the topbar reaches the top of the viewport, the topbar javascript changes its class from "sticky" to "fixed". So, in custom.scss I can just style ".permafix.fixed" to have the new margin-top of the height of the fixed content, then add a simple transition of 1s. This has a solid effect and possibly better than my question requests.

However, I am still curious to see if it's possible to trigger the "sticky" to "fixed" class switch before the top of the viewport is reached?

Thank you.

.permafix {
     margin-top: 0;
}

.permabar {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       margin-top: 0;
       margin-bottom: 0;
       max-width: 71.25rem;
}

.right {
     text-align: right;
}

.permafix.fixed {
     margin-top: 45px;
     -webkit-transition: 1s;
     transition: 1s;
}

Posts Followed

Following

  • No Content

Followers

  • No Content