Menu icon Foundation

My Posts


  • 3
    Replies
  • Sticky on small only?

    By bill

    sticky

    Is there an option for the sticky plugin to make it sticky on small screens ONLY?  Right now, if I use data-sticky-on="small" it seems to stick on all screen sizes. 

    Last Reply by Jacky888 about 1 year ago










My Comments

bill commented on bill's post over 2 years

Just a follow up to say that the solution was to use gulp-rev with rev-collector rather than rev-replace. 
I might be able to put together a pull request to add the functionality to foundation if it's useful or not already there. 
I just took a quick look at github and I notice that the gulp files have changed dramatically from the version I have. (6.2 or 6.2.1 I think). 
Was the functionality added recently? If I do a pull request I'll have to rework it and test it on the new gulp setup. 

bill commented on bill's post over 2 years

Not specifically. I haven't seen any reference to a clean function in the Zurb Stack.. can you point me at some docs or something?
The only clean function I have seen simply deletes the contents of the 'dist' folder. It doesn't seem to do anything related to cache-busting. 
Gulp-rev just seems to be the standard way to do it (adding file hashes to filenames). I might have worked out how to do it with gulp-rev, but I haven't had a chance to try my idea yet. If there's a built in way then that'd be useful to know about. 

bill commented on bill's post about 3 years

 Doesn't seem to address the issue of being sticky on small screens ONLY. Am I missing something? 

bill commented on Adolfo Barreto's post about 3 years

How would one make it sticky on small screens ONLY? 
data-sticky-on="small"
seems to make it sticky on all screen size, and therefore be the same as having no option. 
Anyone have any ideas? 

bill commented on Diego Ramirez's post about 3 years

Does anyone know how to make a responsive menu that's sticky ONLY on small screens? 
The responsive menu has 2 elements, one shown for small screens and one for medium up. 
If I wrap the small screen menu in the sticky div, the menu bar sticks, but the accordion menu doesn't stick. 
Alternatively, if I wrap both menu elements in the sticky div, the menu sticks correctly on the small screen, but it also sticks on medium up. 
What I really need is a data-sticky-on="small-only" type of option. Is there such a thing? 
If not, anyone have any ideas on how to achieve this? 
My current code, which works fine on small screens, but also sticks unnecessarily on medium up is here: 
<nav data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop:0;" style="width:100%">
<div class="title-bar no-js" data-responsive-toggle="site-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>

&lt;ul id="site-menu" class="no-js vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown"&gt;
  &lt;li&gt;
    &lt;!-- menu lists go here --&gt;
  &lt;/li&gt;
&lt;/ul&gt;

</div>

</nav>

bill commented on bill's post about 3 years

That makes sense. I'll give it a go. 
[edit] Seems to work nicely. Many thanks! 

bill commented on bill's post over 3 years

Bump. 
Anyone tried it or have the ability to do so? 

bill commented on bill's post over 3 years

Seems likely to be related to this: 
ignore (Array): provide a list of selectors that should not be removed by UnCSS. For example, styles added by user interaction with the page (hover, click), since those are not detectable by UnCSS yet. Both literal names and regex patterns are recognized. Otherwise, you can add a comment before specific selectors:

/* uncss:ignore /
.selector1 {
/
this rule will be ignored */
}

.selector2 {
/* this will NOT be ignored */
}
https://github.com/giakki/uncss

bill commented on bill's post over 3 years

Ok. I've tracked it down to UnCSS. Commenting that out of the gulpfile seems to allow the site to build without issues. 
Looks like UnCSS is incorrectly pruning some necessary css. I'll follow up on UnCSS, but if anyone has any ideas then I'd appreciate it. 
FYI, I don't think the error messages I posted above are relevant, as those seem to be JS errors, but if anyone has any light to shed on those and whether I should be worried about them, that'd be appreciated too. 

bill commented on bill's post over 3 years

Thanks, but I worked it out. 
Turned out that the package.json file had somehow been deleted. Restoring that seems to have fixed the issue. 
Must have been user error on our end (probably me!) 

Posts Followed







  • 6
    Replies
  • Responsive Menu

    By Amir

    Responsivemenudropdowndrilldown

    I want to create a menu that behaves as a horizontal drop-down menu in medium/large screens and as vertical drildown in small screens. The problem is that in 6.1.2 the sub menus appears to the right of the menu items and the arrow is directed to right:... (continued)

    Last Reply by bill over 3 years ago



Following

    No Content

Followers

My Posts

My Comments

You commented on bill's post over 2 years

Just a follow up to say that the solution was to use gulp-rev with rev-collector rather than rev-replace. 
I might be able to put together a pull request to add the functionality to foundation if it's useful or not already there. 
I just took a quick look at github and I notice that the gulp files have changed dramatically from the version I have. (6.2 or 6.2.1 I think). 
Was the functionality added recently? If I do a pull request I'll have to rework it and test it on the new gulp setup. 

You commented on bill's post over 2 years

Not specifically. I haven't seen any reference to a clean function in the Zurb Stack.. can you point me at some docs or something?
The only clean function I have seen simply deletes the contents of the 'dist' folder. It doesn't seem to do anything related to cache-busting. 
Gulp-rev just seems to be the standard way to do it (adding file hashes to filenames). I might have worked out how to do it with gulp-rev, but I haven't had a chance to try my idea yet. If there's a built in way then that'd be useful to know about. 

You commented on bill's post about 3 years

 Doesn't seem to address the issue of being sticky on small screens ONLY. Am I missing something? 

You commented on Adolfo Barreto's post about 3 years

How would one make it sticky on small screens ONLY? 
data-sticky-on="small"
seems to make it sticky on all screen size, and therefore be the same as having no option. 
Anyone have any ideas? 

You commented on Diego Ramirez's post about 3 years

Does anyone know how to make a responsive menu that's sticky ONLY on small screens? 
The responsive menu has 2 elements, one shown for small screens and one for medium up. 
If I wrap the small screen menu in the sticky div, the menu bar sticks, but the accordion menu doesn't stick. 
Alternatively, if I wrap both menu elements in the sticky div, the menu sticks correctly on the small screen, but it also sticks on medium up. 
What I really need is a data-sticky-on="small-only" type of option. Is there such a thing? 
If not, anyone have any ideas on how to achieve this? 
My current code, which works fine on small screens, but also sticks unnecessarily on medium up is here: 
<nav data-sticky-container>
<div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop:0;" style="width:100%">
<div class="title-bar no-js" data-responsive-toggle="site-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>

&lt;ul id="site-menu" class="no-js vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown"&gt;
  &lt;li&gt;
    &lt;!-- menu lists go here --&gt;
  &lt;/li&gt;
&lt;/ul&gt;

</div>

</nav>

You commented on bill's post about 3 years

That makes sense. I'll give it a go. 
[edit] Seems to work nicely. Many thanks! 

You commented on bill's post over 3 years

Bump. 
Anyone tried it or have the ability to do so? 

You commented on bill's post over 3 years

Seems likely to be related to this: 
ignore (Array): provide a list of selectors that should not be removed by UnCSS. For example, styles added by user interaction with the page (hover, click), since those are not detectable by UnCSS yet. Both literal names and regex patterns are recognized. Otherwise, you can add a comment before specific selectors:

/* uncss:ignore /
.selector1 {
/
this rule will be ignored */
}

.selector2 {
/* this will NOT be ignored */
}
https://github.com/giakki/uncss

You commented on bill's post over 3 years

Ok. I've tracked it down to UnCSS. Commenting that out of the gulpfile seems to allow the site to build without issues. 
Looks like UnCSS is incorrectly pruning some necessary css. I'll follow up on UnCSS, but if anyone has any ideas then I'd appreciate it. 
FYI, I don't think the error messages I posted above are relevant, as those seem to be JS errors, but if anyone has any light to shed on those and whether I should be worried about them, that'd be appreciated too. 

You commented on bill's post over 3 years

Thanks, but I worked it out. 
Turned out that the package.json file had somehow been deleted. Restoring that seems to have fixed the issue. 
Must have been user error on our end (probably me!) 

Posts Followed

Following

  • No Content

Followers

  • No Content