Menu icon Foundation

Designer | Hereford, UK

Proud Yetinaut!

My Posts

No Content

My Comments

Brett Mason commented on Rafi Benkual's post almost 4 years

Thanks for the prompt to contribute on this Rafi. In summary I agree with Jeremy, but I'll go into more details.

I think the whole concept is a fantastic one, and since closed beta testing is the component I was most excited about using as it has huge potential. To me the navigation is the single most important aspect of Foundation (ahead of even the grid) as I think its a crucial part of any website.

However the small bugs introduced in various point releases have really been a problem (but you know that already!). I think more of a priority should be put on getting the navigation components bullet proof, as I'm sure this would cut down on the number of support requests.

Also some more fully working examples would be great for users, as I see requests all the time on the forums - I try and help when I can with a codepen, but some more solid examples, clearly signposted would be a help.

In terms of the docs, yes they are a bit thin and probably not super clear. I think breaking the responsive menu and related components up in the navigation into its own section might help a bit.

Lastly my main issue (other than bugs) is not being able to navigate to parent links on mobile. I see this as a massive usability issue. I'm happy to see my PR for the parent link for drilldown is getting included - this will fix the drilldown component for me. However I feel like a similar take on accordion menus is essential to make them useable in the real world. I mentioned it before, but an option to make it work like this is a must imo: http://samikeijonen.github.io/responsive-nav.js/demos/multiple-levels/index.html

That's all for now!

Brett Mason commented on Bjarni Wark's post almost 4 years

Rather than using @include grid-col(4) you can use @include grid-col-size(4);

I havent actually looked at the difference in css output, but I think that's the correct way to do it from the Zurb examples I've seen.

Brett Mason commented on Christopher Wardle's post almost 4 years

Hey Christopher

Glad that little bit worked, and thanks for the explanation. You can read about that code here: http://foundation.zurb.com/sites/docs/responsive-navigation.html

So I've just had a look and got it working the way you want, you need to do the following:

  • Change the Top Bar class from show-for-medium to show-for-large in header.php
  • Within library > navigation.php on line 46 change change the class show-for-small-only to hide-for-large
  • Set .top-bar-right to be 100% width on medium (by default its only on small and you can't change this without extra code) something like:
.top-bar-right {
    @include breakpoint(medium only) {
        width: 100%;
    }

Let me know how you get on!

Brett Mason commented on Christopher Wardle's post almost 4 years

I'm not familiar with FoundationPress but I've just had a look at the header.php file.
You can modify the title-bar code and add this to it:

data-hide-for="large"

This should show the title bar on any screen size other than large. If you can explain exactly what you want to show at what size I'll try and help more. Specifically, I see FoundationPress uses the accordion menu on small only - is it this you want on medium too?

Brett Mason commented on Yan Wong's post almost 4 years

Just in case this helps anyone I setup a Codepen the other day to help someone else with a similar issue: http://codepen.io/brettsmason/pen/adbYXV

The only quirk I've found is having to set the .sticky element to be 100% width. Also the anchor element seems to be important - not sure if its a bug or not.

Brett Mason commented on PaulR's post almost 4 years

I think you are probably missing a few util libraries. Here's my gulp sources if that helps:

     'bower_components/what-input/what-input.js',
    'bower_components/foundation-sites/js/foundation.core.js',
    'bower_components/foundation-sites/js/foundation.util.*.js',
    // Paths to individual JS components defined below
    'bower_components/foundation-sites/js/foundation.abide.js',
    'bower_components/foundation-sites/js/foundation.accordion.js',
    'bower_components/foundation-sites/js/foundation.accordionMenu.js',
    'bower_components/foundation-sites/js/foundation.drilldown.js',
    'bower_components/foundation-sites/js/foundation.dropdown.js',
    'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
    'bower_components/foundation-sites/js/foundation.equalizer.js',
    'bower_components/foundation-sites/js/foundation.interchange.js',
    'bower_components/foundation-sites/js/foundation.magellan.js',
    'bower_components/foundation-sites/js/foundation.offcanvas.js',
    'bower_components/foundation-sites/js/foundation.orbit.js',
    'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
    'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
    'bower_components/foundation-sites/js/foundation.reveal.js',
    'bower_components/foundation-sites/js/foundation.slider.js',
    'bower_components/foundation-sites/js/foundation.sticky.js',
    'bower_components/foundation-sites/js/foundation.tabs.js',
    'bower_components/foundation-sites/js/foundation.toggler.js',
    'bower_components/foundation-sites/js/foundation.tooltip.js',

Line 3 is probably the one that will help you the most, and of course just remove or comment out the ones you don't want!

Brett Mason commented on Meg Seegmiller's post almost 4 years

It looks like Equalizer has been re-written on Github and there will be a new option: equalizeOn:"breakpointStr" - see this: https://github.com/zurb/foundation-sites/pull/7482

I'm not sure when this will be released, I think I saw in version 6.1.

Brett Mason commented on Les Fenison's post almost 4 years

Sorry Les replied in a hurry and forgot we weren't talking about topbar... :)

Have a look here: http://codepen.io/brettsmason/pen/LGYLYy

From what I've learnt about using the sticky plugin is to anchor it to the main container on your page - this makes it stick correctly. However as mentioned above the % width issue happens, so setting the sticky div to be 100% seems to work.

Brett Mason commented on Les Fenison's post almost 4 years

Hey Les

I think the huge vertical gap you mention might be a bug - its the height of one of the submenu lists.
Also I think the sticky behaviour is a bit buggy and doesn't fully work for this yet. You can see a demo here: http://codepen.io/brettsmason/pen/adbYXV

The work around is to set the topbar to be 100vw, as % based values don't seem to work quite right yet.

Brett Mason commented on Feather Light's post about 4 years

Sorry about that I made a typo in the above code (the off canvas ID should of been OffCanvasLeft not OffCanvasleft) - I've updated the code in my first post. Here's an updated codepen: http://codepen.io/brettsmason/pen/QyWmZb

Also out of interest what do you think would be helpful to you in the docs? Be as specific as you can. I've been thinking about doing some pull requests to the docs on Github so any input would be great :)

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Rafi Benkual's post almost 4 years

Thanks for the prompt to contribute on this Rafi. In summary I agree with Jeremy, but I'll go into more details.

I think the whole concept is a fantastic one, and since closed beta testing is the component I was most excited about using as it has huge potential. To me the navigation is the single most important aspect of Foundation (ahead of even the grid) as I think its a crucial part of any website.

However the small bugs introduced in various point releases have really been a problem (but you know that already!). I think more of a priority should be put on getting the navigation components bullet proof, as I'm sure this would cut down on the number of support requests.

Also some more fully working examples would be great for users, as I see requests all the time on the forums - I try and help when I can with a codepen, but some more solid examples, clearly signposted would be a help.

In terms of the docs, yes they are a bit thin and probably not super clear. I think breaking the responsive menu and related components up in the navigation into its own section might help a bit.

Lastly my main issue (other than bugs) is not being able to navigate to parent links on mobile. I see this as a massive usability issue. I'm happy to see my PR for the parent link for drilldown is getting included - this will fix the drilldown component for me. However I feel like a similar take on accordion menus is essential to make them useable in the real world. I mentioned it before, but an option to make it work like this is a must imo: http://samikeijonen.github.io/responsive-nav.js/demos/multiple-levels/index.html

That's all for now!

You commented on Bjarni Wark's post almost 4 years

Rather than using @include grid-col(4) you can use @include grid-col-size(4);

I havent actually looked at the difference in css output, but I think that's the correct way to do it from the Zurb examples I've seen.

You commented on Christopher Wardle's post almost 4 years

Hey Christopher

Glad that little bit worked, and thanks for the explanation. You can read about that code here: http://foundation.zurb.com/sites/docs/responsive-navigation.html

So I've just had a look and got it working the way you want, you need to do the following:

  • Change the Top Bar class from show-for-medium to show-for-large in header.php
  • Within library > navigation.php on line 46 change change the class show-for-small-only to hide-for-large
  • Set .top-bar-right to be 100% width on medium (by default its only on small and you can't change this without extra code) something like:
.top-bar-right {
    @include breakpoint(medium only) {
        width: 100%;
    }

Let me know how you get on!

You commented on Christopher Wardle's post almost 4 years

I'm not familiar with FoundationPress but I've just had a look at the header.php file.
You can modify the title-bar code and add this to it:

data-hide-for="large"

This should show the title bar on any screen size other than large. If you can explain exactly what you want to show at what size I'll try and help more. Specifically, I see FoundationPress uses the accordion menu on small only - is it this you want on medium too?

You commented on Yan Wong's post almost 4 years

Just in case this helps anyone I setup a Codepen the other day to help someone else with a similar issue: http://codepen.io/brettsmason/pen/adbYXV

The only quirk I've found is having to set the .sticky element to be 100% width. Also the anchor element seems to be important - not sure if its a bug or not.

You commented on PaulR's post almost 4 years

I think you are probably missing a few util libraries. Here's my gulp sources if that helps:

     'bower_components/what-input/what-input.js',
    'bower_components/foundation-sites/js/foundation.core.js',
    'bower_components/foundation-sites/js/foundation.util.*.js',
    // Paths to individual JS components defined below
    'bower_components/foundation-sites/js/foundation.abide.js',
    'bower_components/foundation-sites/js/foundation.accordion.js',
    'bower_components/foundation-sites/js/foundation.accordionMenu.js',
    'bower_components/foundation-sites/js/foundation.drilldown.js',
    'bower_components/foundation-sites/js/foundation.dropdown.js',
    'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
    'bower_components/foundation-sites/js/foundation.equalizer.js',
    'bower_components/foundation-sites/js/foundation.interchange.js',
    'bower_components/foundation-sites/js/foundation.magellan.js',
    'bower_components/foundation-sites/js/foundation.offcanvas.js',
    'bower_components/foundation-sites/js/foundation.orbit.js',
    'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
    'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
    'bower_components/foundation-sites/js/foundation.reveal.js',
    'bower_components/foundation-sites/js/foundation.slider.js',
    'bower_components/foundation-sites/js/foundation.sticky.js',
    'bower_components/foundation-sites/js/foundation.tabs.js',
    'bower_components/foundation-sites/js/foundation.toggler.js',
    'bower_components/foundation-sites/js/foundation.tooltip.js',

Line 3 is probably the one that will help you the most, and of course just remove or comment out the ones you don't want!

You commented on Meg Seegmiller's post almost 4 years

It looks like Equalizer has been re-written on Github and there will be a new option: equalizeOn:"breakpointStr" - see this: https://github.com/zurb/foundation-sites/pull/7482

I'm not sure when this will be released, I think I saw in version 6.1.

You commented on Les Fenison's post almost 4 years

Sorry Les replied in a hurry and forgot we weren't talking about topbar... :)

Have a look here: http://codepen.io/brettsmason/pen/LGYLYy

From what I've learnt about using the sticky plugin is to anchor it to the main container on your page - this makes it stick correctly. However as mentioned above the % width issue happens, so setting the sticky div to be 100% seems to work.

You commented on Les Fenison's post almost 4 years

Hey Les

I think the huge vertical gap you mention might be a bug - its the height of one of the submenu lists.
Also I think the sticky behaviour is a bit buggy and doesn't fully work for this yet. You can see a demo here: http://codepen.io/brettsmason/pen/adbYXV

The work around is to set the topbar to be 100vw, as % based values don't seem to work quite right yet.

You commented on Feather Light's post about 4 years

Sorry about that I made a typo in the above code (the off canvas ID should of been OffCanvasLeft not OffCanvasleft) - I've updated the code in my first post. Here's an updated codepen: http://codepen.io/brettsmason/pen/QyWmZb

Also out of interest what do you think would be helpful to you in the docs? Be as specific as you can. I've been thinking about doing some pull requests to the docs on Github so any input would be great :)

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content