Menu icon Foundation
Sticky menu

 

Hello

I have some problems to have a sticky menu. My code works on codepen but not on my computer.

On it, i load precompiled sass and js since i am not load all the foundation's lib. The menu don't stick on top and i seach what i missed

 

my style.scss:

@charset 'utf-8';

 

@import 'settings';

@import 'foundation';

 

@include foundation-global-styles;

@include foundation-typography;

@include foundation-button;

@include foundation-forms;

@include foundation-callout;

@include foundation-menu;

@include foundation-menu-icon;

@include foundation-drilldown-menu;

@include foundation-dropdown-menu;

@include foundation-sticky;

@include foundation-title-bar;

@include foundation-top-bar;

@include foundation-visibility-classes;

 

.container {

  @include grid-row;

}

 

.main, .sidebar {

  @include grid-column;

  margin-top: 16px;

}

 

.top-bar{

  .menu-text {

    color: white;

  }

}

 

@include breakpoint(medium){

  .main{

    @include grid-column-size(8);

  }

  .sidebar {

    @include grid-column-size(4);

  }

}

 

my end file.html:

 

<script src="vendor/jquery/dist/jquery.js"></script>

<script src="vendor/what-input/dist/what-input.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.core.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.keyboard.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.box.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.nest.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.triggers.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.mediaQuery.js"></script>

 

<script src="vendor/foundation-sites/dist/js/plugins/foundation.sticky.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.drilldown.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.dropdownMenu.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.responsiveToggle.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.responsiveMenu.js"></script>

<script src="js/app.js"></script>

 

my app.js:

 

$(function() {

  $(document).foundation();

});

 

If you see any mistakes, i will take it

 

Best regards

sticky menu

 

Hello

I have some problems to have a sticky menu. My code works on codepen but not on my computer.

On it, i load precompiled sass and js since i am not load all the foundation's lib. The menu don't stick on top and i seach what i missed

 

my style.scss:

@charset 'utf-8';

 

@import 'settings';

@import 'foundation';

 

@include foundation-global-styles;

@include foundation-typography;

@include foundation-button;

@include foundation-forms;

@include foundation-callout;

@include foundation-menu;

@include foundation-menu-icon;

@include foundation-drilldown-menu;

@include foundation-dropdown-menu;

@include foundation-sticky;

@include foundation-title-bar;

@include foundation-top-bar;

@include foundation-visibility-classes;

 

.container {

  @include grid-row;

}

 

.main, .sidebar {

  @include grid-column;

  margin-top: 16px;

}

 

.top-bar{

  .menu-text {

    color: white;

  }

}

 

@include breakpoint(medium){

  .main{

    @include grid-column-size(8);

  }

  .sidebar {

    @include grid-column-size(4);

  }

}

 

my end file.html:

 

<script src="vendor/jquery/dist/jquery.js"></script>

<script src="vendor/what-input/dist/what-input.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.core.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.keyboard.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.box.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.nest.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.triggers.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.util.mediaQuery.js"></script>

 

<script src="vendor/foundation-sites/dist/js/plugins/foundation.sticky.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.drilldown.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.dropdownMenu.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.responsiveToggle.js"></script>

<script src="vendor/foundation-sites/dist/js/plugins/foundation.responsiveMenu.js"></script>

<script src="js/app.js"></script>

 

my app.js:

 

$(function() {

  $(document).foundation();

});

 

If you see any mistakes, i will take it

 

Best regards