Menu icon Foundation

My Posts

  • 7
    Replies
  • Foundation 6.x Top Bar Responsive Menu

    By PHILL

    6top barmenu

    Hello, I have build a responsive menu following the instructions here https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6 The responsive bar works, but not the way I had hoped, in short I am looking for more of a v5 look: The resp... (continued)

    Last Reply by miss ziva over 1 year ago



My Comments

PHILL commented on Rafi Benkual's post over 3 years

WARNING: Rename $grid-column-responsive-gutter to $grid-column-gutter to remove this warning.
on line 41 of bower_components/foundation-sites/scss/grid/_grid.scss

events.js:154
throw er; // Unhandled 'error' event
^
Error
at new JS_Parse_Error (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1526:18)
at js_error (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1534:11)
at parse_error (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1647:9)
at Object.next_token as input, <anonymous>:1912:9)
at next (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2012:25)
at subscripts (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2695:13)
at subscripts (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2676:20)
at subscripts (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2676:20)
at expr_atom (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2552:20)
at maybe_unary (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2716:19)

 
As mentioned else where I get this error when using npm start for a gulpfile.js but I am sure this is not related to babel and this error occures in the SASS build block.
Using Ubuntu Desktop 15.10 clean build todayNPM 3.7.3Node v5.8.0Bower 1.7.7
 
Also I have added babel to my app and it appears that there is a know issue with the npm package, I would recomend that babel would not beused with foundation untill this is resolved.
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No repository field.
[email protected]:/var/www/my-site# npm install
[email protected] /var/www/my-site
├── [email protected]
└── [email protected]
 
https://github.com/npm/npm/issues/9204https://github.com/npm/npm/issues/10768

PHILL commented on PHILL's post almost 4 years

Sorry for the slow reply. For me I need ed a quick simple solution.

@media #{$small-only} {
  nav.top-bar li
  {
    clear:both!important;
    display:block;
  }
}

PHILL commented on PHILL's post almost 4 years

Hi, 6 is a little different after some trial and error I have got it working but the tutorial really needs some work http://foundation.zurb.com/sites/docs/off-canvas.html

<div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

   <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
     <button class="close-button" aria-label="Close menu" type="button" data-close>
     <span aria-hidden="true">&times;</span>
   </button>
   <ul class="vertical menu">
        <li><a href="#">Foundation</a></li>
        <li><a href="#">Dot</a></li>
        <li><a href="#">ZURB</a></li>
        <li><a href="#">Com</a></li>
        <li><a href="#">Slash</a></li>
        <li><a href="#">Sites</a></li>
   </ul>
 </div>
<div class="off-canvas-content" data-off-canvas-content>

<script type="text/javascript">
$(document).foundation().ready(function(){
  var OffCanvas = new Foundation.OffCanvas($('#offCanvasLeft'), {
    open_method : 'overlap' ,
    close_on_click : true
  });
});
</script>

Posts Followed



Following

    No Content

Followers

My Posts



My Comments

You commented on Rafi Benkual's post over 3 years

WARNING: Rename $grid-column-responsive-gutter to $grid-column-gutter to remove this warning.
on line 41 of bower_components/foundation-sites/scss/grid/_grid.scss

events.js:154
throw er; // Unhandled 'error' event
^
Error
at new JS_Parse_Error (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1526:18)
at js_error (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1534:11)
at parse_error (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:1647:9)
at Object.next_token as input, <anonymous>:1912:9)
at next (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2012:25)
at subscripts (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2695:13)
at subscripts (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2676:20)
at subscripts (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2676:20)
at expr_atom (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2552:20)
at maybe_unary (eval at <anonymous> (/var/www/my-site/node_modules/uglify-js/tools/node.js:22:1), <anonymous>:2716:19)

 
As mentioned else where I get this error when using npm start for a gulpfile.js but I am sure this is not related to babel and this error occures in the SASS build block.
Using Ubuntu Desktop 15.10 clean build todayNPM 3.7.3Node v5.8.0Bower 1.7.7
 
Also I have added babel to my app and it appears that there is a know issue with the npm package, I would recomend that babel would not beused with foundation untill this is resolved.
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No repository field.
[email protected]:/var/www/my-site# npm install
[email protected] /var/www/my-site
├── [email protected]
└── [email protected]
 
https://github.com/npm/npm/issues/9204https://github.com/npm/npm/issues/10768

You commented on PHILL's post almost 4 years

Sorry for the slow reply. For me I need ed a quick simple solution.

@media #{$small-only} {
  nav.top-bar li
  {
    clear:both!important;
    display:block;
  }
}

You commented on PHILL's post almost 4 years

Hi, 6 is a little different after some trial and error I have got it working but the tutorial really needs some work http://foundation.zurb.com/sites/docs/off-canvas.html

<div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

   <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
     <button class="close-button" aria-label="Close menu" type="button" data-close>
     <span aria-hidden="true">&times;</span>
   </button>
   <ul class="vertical menu">
        <li><a href="#">Foundation</a></li>
        <li><a href="#">Dot</a></li>
        <li><a href="#">ZURB</a></li>
        <li><a href="#">Com</a></li>
        <li><a href="#">Slash</a></li>
        <li><a href="#">Sites</a></li>
   </ul>
 </div>
<div class="off-canvas-content" data-off-canvas-content>

<script type="text/javascript">
$(document).foundation().ready(function(){
  var OffCanvas = new Foundation.OffCanvas($('#offCanvasLeft'), {
    open_method : 'overlap' ,
    close_on_click : true
  });
});
</script>

Posts Followed

Following

  • No Content

Followers

  • No Content