Menu icon Foundation

Coder | toronto, ontario

I'm a technology lawyer who has developed software and a web service as a hobby.

My Posts

  • 2
    Replies
  • Sticky Not Working on Nav

    By Dale Dietrich

    stickynavmenu

    OK, I've spent about 7 or 8 hours on this and for the life of me don't know what I'm doing wrong.  I have followed the 'Sticky' documentation as best I can and have tried many many things and I can't get sticky to work at all - not once!   I wan... (continued)

    Last Reply by Dale Dietrich over 2 years ago








My Comments

Dale Dietrich commented on Dale Dietrich's post over 2 years

Rafi, that was my starting point. I tried following the instructions on that page and it just didn't work. Not once, not ever.  
When I followed the w3schools tutorials on sticky headers I got the font and its label to stick but when I scrolled text up, the text visibly scrolled under the nav menu. That was the best I achieved. But couldn't get the sticky code samples from the docs or from the lesson you cite above to work at all! That's why I ended up here.  Is there anything wrong with the code I ended up with above which, to my mind, most closely matches that of the Zurb sticky plugin documentation,  but still doesn't stick.
Not sure if you are asking me or someone named 'deam', did you mean Dean? to add to code-pen. If you mean me, I don't know what code-pen is. Do I have permissions to use whatever this is?

Dale Dietrich commented on Dale Dietrich's post over 2 years

OK, finally solved it.  To accomplish BOTH:

changing the off-canvas size to 200px; and
making this work when the off-canvas menu stays on the screen for medium-sized screens and above,

do this: 
.position-left {
width: 200px;
}

.position-left.reveal-for-medium ~ .off-canvas-content {
margin-left: 200px;

}

/* ---- Down at the bottom of your CSS file with the other Media Query CSS ----- */

@media (max-width: 639px) {
.position-left.reveal-for-medium ~ .off-canvas-content {
margin-left: 0px;

}
}

....Dale

Dale Dietrich commented on Dale Dietrich's post over 2 years

OK, Rafi that got me part-way there.
 
The scoll-bar is gone, but the off-canvas menu is not part of the main page in that when the content of the main section of my page (to the right of the off-canvas-menu which is really on canvas on large screens) is shorter than the off-canvas menu there is no scroll bar on the far right of my page to scroll down.
What I want is for the right scroll bar on the right side of a browser page to scroll the WHOLE page down BOTH when the main content goes beyond the standard browser page or when the off-canvas menu on the left does.  So, for example here is a photo of my test page.  You can see the main content on the right (just filler content on the test page) is far far shorter than the off-canvas 'Friends' menu on the left which runs off the page. In this context I still want just one scroll bar on the far right for the whole page. 

Dale Dietrich commented on Dale Dietrich's post over 2 years

Thanks Darren.  Yes, as I wrote in my original question, the way you are suggesting is the way I've always done it in PHP. Easy peasy. Was just thinking there must be an easy way to accomplish the same thing with HTML and Javascript but it appears there is not.

Dale Dietrich commented on Dale Dietrich's post over 2 years

OK, to bring this full circle, the suggested code that Rafi linked to resulted in the following:

----
The nav icons are rather tiny and not mobile ressponsive.  They didn't go as wide as the screen on large screens and the shop icon/option on the right is chopped off on mobile screen sizes.  
With the changes below I was able to get the following: 

---
The nav icons are bigger and now spread the width of the page and squeeze down nicely on a mobile page. Below are the changes I made.  First you have to add the word 'expanded' to the ul class as follows to make the icons mobile responsive:
<ul class="menu icon-top expanded" >
<li><a href="#"><i class="fi-torsos-all" data-toggle="offCanvasLeft"></i> <span data-toggle="offCanvasLeft">Friends</span></a></li>
<li><a href="#"><i class="fi-torso"></i> <span>Me</span></a></li>
<li><a href="#"><i class="fi-home"></i> <span>Home</span></a></li>
<li><a href="#"><i class="fi-magnifying-glass"></i> <span>Search</span></a></li>
<li><a href="#"><i class="fi-alert"></i> <span>Alert</span></a></li>
<li><a href="#"><i class="fi-list-thumbnails"></i> <span>Shop</span></a></li>
</ul>
</nav>
and the following CSS enlarged the icons, made the label/span text a bit smaller and decreased the space between the icon and the label.
 
.menu > li > a {
padding: 0.2rem .4rem;
line-height: 1;
}
.menu.icon-top > li > a i {
margin: 0 auto;
}

.menu i{
font-size: 2rem;

}
.menu a span{
font-size: 0.875rem;
}
And, so, below is how it now looks on a mobile screen. EXACTLY WHAT I WAS AFTER:
 

 
I hope this helps others trying to achieve the result I was after.
...Dale
 
 

Dale Dietrich commented on Dale Dietrich's post over 2 years

Thanks Rafi:
That sort-of worked. Yes it changed the width of the off-canvas menu that worked well on my iPhone, but it left a gap between the menu and the rest of the body of the page on the PC.
I gather your warning about setting the transform amount is to blame. But I don't know what to set the transform amount to. It currently is set as follows:
.position-left.reveal-for-medium {
-ms-transform: none;
transform: none;
z-index: 1;
]
with the -ms-transform element struck out.
I tried to set transform to 200px (my test off-canvas-menu size) and that does nothing (other than throwup an i
ncomprehensible error message in netbeans for me.
What specifically do I set transform too? And what CSS class am I setting it in.  Sorry to sound like such a newb here. I'm learning as I'm going along.
Thanks.

Dale Dietrich commented on Dale Dietrich's post over 2 years

OK, wow, meme. I think you sold me on just living with cutting and pasting my footers and headers back and forth between files! :)
Thanks.

Dale Dietrich commented on Dale Dietrich's post over 2 years

Thanks Chris!!!
And I also just discovered this that perfectly demonstrates it:
 http://foundation.zurb.com/building-blocks/blocks/button-icon-badge.html
  ...Dale

Dale Dietrich commented on Dale Dietrich's post over 2 years

OH sheesh!!!!
 
Thank you thank you thank you Rafi!  I can't tell you how many times I looked at that exact Doc and didn't realize it. Probably because the doc uses the same icon for all four items in the example. I was looking for the usual icon nav bar that you see in the link I included. Probably would have looked at that 100 more times and not noticed it!
To whomever is responsible for the documentation, I strongly suggest you make the icons in the example all be different so that people who are as seemingly daft as I am can find it easier! Just like it was in the documentation for Foundation 5!
Man I feel stupid!
Thanks again!
...Dale

Dale Dietrich commented on Dale Dietrich's post over 2 years

Thanks Rafi
Since my original post above I tentatively came to this conclusion as well, however I haven't been able to make it work. Each time I tried my page blew up. Now that I know it can be done for certain, I'll give it ago again. I'll probably try a small test page before trying to fit it into my primary site. Undoubtedly I forgot a comma somewhere during my tests :)
...Dale

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Dale Dietrich's post over 2 years

Rafi, that was my starting point. I tried following the instructions on that page and it just didn't work. Not once, not ever.  
When I followed the w3schools tutorials on sticky headers I got the font and its label to stick but when I scrolled text up, the text visibly scrolled under the nav menu. That was the best I achieved. But couldn't get the sticky code samples from the docs or from the lesson you cite above to work at all! That's why I ended up here.  Is there anything wrong with the code I ended up with above which, to my mind, most closely matches that of the Zurb sticky plugin documentation,  but still doesn't stick.
Not sure if you are asking me or someone named 'deam', did you mean Dean? to add to code-pen. If you mean me, I don't know what code-pen is. Do I have permissions to use whatever this is?

You commented on Dale Dietrich's post over 2 years

OK, finally solved it.  To accomplish BOTH:

changing the off-canvas size to 200px; and
making this work when the off-canvas menu stays on the screen for medium-sized screens and above,

do this: 
.position-left {
width: 200px;
}

.position-left.reveal-for-medium ~ .off-canvas-content {
margin-left: 200px;

}

/* ---- Down at the bottom of your CSS file with the other Media Query CSS ----- */

@media (max-width: 639px) {
.position-left.reveal-for-medium ~ .off-canvas-content {
margin-left: 0px;

}
}

....Dale

You commented on Dale Dietrich's post over 2 years

OK, Rafi that got me part-way there.
 
The scoll-bar is gone, but the off-canvas menu is not part of the main page in that when the content of the main section of my page (to the right of the off-canvas-menu which is really on canvas on large screens) is shorter than the off-canvas menu there is no scroll bar on the far right of my page to scroll down.
What I want is for the right scroll bar on the right side of a browser page to scroll the WHOLE page down BOTH when the main content goes beyond the standard browser page or when the off-canvas menu on the left does.  So, for example here is a photo of my test page.  You can see the main content on the right (just filler content on the test page) is far far shorter than the off-canvas 'Friends' menu on the left which runs off the page. In this context I still want just one scroll bar on the far right for the whole page. 

You commented on Dale Dietrich's post over 2 years

Thanks Darren.  Yes, as I wrote in my original question, the way you are suggesting is the way I've always done it in PHP. Easy peasy. Was just thinking there must be an easy way to accomplish the same thing with HTML and Javascript but it appears there is not.

You commented on Dale Dietrich's post over 2 years

OK, to bring this full circle, the suggested code that Rafi linked to resulted in the following:

----
The nav icons are rather tiny and not mobile ressponsive.  They didn't go as wide as the screen on large screens and the shop icon/option on the right is chopped off on mobile screen sizes.  
With the changes below I was able to get the following: 

---
The nav icons are bigger and now spread the width of the page and squeeze down nicely on a mobile page. Below are the changes I made.  First you have to add the word 'expanded' to the ul class as follows to make the icons mobile responsive:
<ul class="menu icon-top expanded" >
<li><a href="#"><i class="fi-torsos-all" data-toggle="offCanvasLeft"></i> <span data-toggle="offCanvasLeft">Friends</span></a></li>
<li><a href="#"><i class="fi-torso"></i> <span>Me</span></a></li>
<li><a href="#"><i class="fi-home"></i> <span>Home</span></a></li>
<li><a href="#"><i class="fi-magnifying-glass"></i> <span>Search</span></a></li>
<li><a href="#"><i class="fi-alert"></i> <span>Alert</span></a></li>
<li><a href="#"><i class="fi-list-thumbnails"></i> <span>Shop</span></a></li>
</ul>
</nav>
and the following CSS enlarged the icons, made the label/span text a bit smaller and decreased the space between the icon and the label.
 
.menu > li > a {
padding: 0.2rem .4rem;
line-height: 1;
}
.menu.icon-top > li > a i {
margin: 0 auto;
}

.menu i{
font-size: 2rem;

}
.menu a span{
font-size: 0.875rem;
}
And, so, below is how it now looks on a mobile screen. EXACTLY WHAT I WAS AFTER:
 

 
I hope this helps others trying to achieve the result I was after.
...Dale
 
 

You commented on Dale Dietrich's post over 2 years

Thanks Rafi:
That sort-of worked. Yes it changed the width of the off-canvas menu that worked well on my iPhone, but it left a gap between the menu and the rest of the body of the page on the PC.
I gather your warning about setting the transform amount is to blame. But I don't know what to set the transform amount to. It currently is set as follows:
.position-left.reveal-for-medium {
-ms-transform: none;
transform: none;
z-index: 1;
]
with the -ms-transform element struck out.
I tried to set transform to 200px (my test off-canvas-menu size) and that does nothing (other than throwup an i
ncomprehensible error message in netbeans for me.
What specifically do I set transform too? And what CSS class am I setting it in.  Sorry to sound like such a newb here. I'm learning as I'm going along.
Thanks.

You commented on Dale Dietrich's post over 2 years

OK, wow, meme. I think you sold me on just living with cutting and pasting my footers and headers back and forth between files! :)
Thanks.

You commented on Dale Dietrich's post over 2 years

Thanks Chris!!!
And I also just discovered this that perfectly demonstrates it:
 http://foundation.zurb.com/building-blocks/blocks/button-icon-badge.html
  ...Dale

You commented on Dale Dietrich's post over 2 years

OH sheesh!!!!
 
Thank you thank you thank you Rafi!  I can't tell you how many times I looked at that exact Doc and didn't realize it. Probably because the doc uses the same icon for all four items in the example. I was looking for the usual icon nav bar that you see in the link I included. Probably would have looked at that 100 more times and not noticed it!
To whomever is responsible for the documentation, I strongly suggest you make the icons in the example all be different so that people who are as seemingly daft as I am can find it easier! Just like it was in the documentation for Foundation 5!
Man I feel stupid!
Thanks again!
...Dale

You commented on Dale Dietrich's post over 2 years

Thanks Rafi
Since my original post above I tentatively came to this conclusion as well, however I haven't been able to make it work. Each time I tried my page blew up. Now that I know it can be done for certain, I'll give it ago again. I'll probably try a small test page before trying to fit it into my primary site. Undoubtedly I forgot a comma somewhere during my tests :)
...Dale

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content