Menu icon Foundation

Developer | Ashland, Ohio

Web Developer who loves Foundation

My Posts






  • 19
    Replies
  • Editor in Yeti Launch

    By Ryan Patterson

    Been using the CSS version of Foundation for a few years now, and absolutely love Foundation. I have been wanting to dive into the SASS version but always had issues getting my environment setup via Terminal, so excited about Yeti Launch. I just insta... (continued)

    Last Reply by Sebastian over 1 year ago


My Comments

Ryan Patterson commented on mpaa's post 4 days

mpaa,
 
I just took your html, just the slider part and put it into a site I'm building using F6 (minified js and css versions) and the slider works great. I'm able to move it no problem. So your HTML isn't the problem. 
Have you used your browsers code inspector to see if there are any js errors? Do you have a live site we could check out first hand?

Ryan Patterson commented on Tomasz Turowiecki's post 5 days

That's really strange. I just tested the .responsive-embed class on a site I'm building now with F6 (SASS version) and it's working perfectly. 
 
I just noticed your css rule is pretty much exactly what should be in the foundation.css. Did you look in your foundation.css file to see if the .responsive-embed css rule was in there?
The only reason I can think of why your foundation.css wouldn't have that css rule is if you did the Custom option when downloading the css version of Foundation and unchecked the responsive embed checkbox in the media section. 
If you didn't do the custom download option, then I have no idea why your foundation.css doesn't have the css for the responsive embed lol. 
The only other thing I can think of is if the container you added .responsive-embed to might of had some other class or ID on it that was applying conflicting styles. 

Ryan Patterson commented on Wyeth Myers's post 6 days

Wyeth,
 
Sorry, forgot to address your question about the topbar height. I don't believe there is a height set on the top-bar, it gets it's height from the content + padding. So you could adjust the topbar padding or content's size and margin/padding to get the height you are looking for. However, the height may change depending on whether or not any content has to wrap when resizing the screen. This is why wouldn't want a fixed height.
I you're using SASS, there is a sass variable for the topbar padding, called $topbar-padding. If using plain old css, just adjust padding on .top-bar.
 
*EDITED*
 
Based off of your screenshot, you may have to adjust the padding on your navigation menu's anchor tags or li (depends on if you just want the text to be clickable), so that when you hover, the background fills the entire topbar. This would also mean you might need to remove the padding from the top bar, and add the difference to the anchor tags. 
 
So if your navigation menu's anchor tags or li's are lets say 20px tall (thats font size and line height factored in), you would need to add 1.40625rem (22.5px) of both top and bottom padding. That would create 45px of total padding, add that to your 20px tall nav items, and it would make your topbar 65px tall (if you removed topbar padding altogether)
 
Hope that helps. 

Ryan Patterson commented on Wyeth Myers's post 6 days

Hi Wyeth,
So I would have to play around with the code to figure out how to get the submenu to span the full width of the content area. 
As for making the submenu horizontal rather than vertical. You can do this easily by replacing .vertical with .horizontal on your sub-menu UL's. 
Also, this is unrelated to your question, but you probably don't need to put your logo in a drilldown/dropdown menu with the logo being the only list item. Just a thought. 
I'll do a test and see if I can get the submenu to span full width.
 
Thanks, 
Ryan

Ryan Patterson commented on Tomasz Turowiecki's post 6 days

Hi Thomasz,
 
Glad to hear you figured out the manual css way to make an embed responsive. For future purposes, you can use Foundation's
.responsive-embed
class. Just add that class to the container element the embed/iframe is in. 
 
For more info, you can refer to the responsive embed section of the F6 docs at http://foundation.zurb.com/sites/docs/responsive-embed.html

Ryan Patterson commented on Sandra John's post 11 days

Sandra,
 
 
You have a bootstrap website and your asking for php/mysql help. You are in the wrong place, this is a support forum for Foundation. Please go to stackoverflow for these types of questions. 

Ryan Patterson commented on T Davis's post 12 days

Hi T,
 
You should be able to use the source ordering classes. So I would do something like: 
 
<div class="row" id="container-wrapper">
<main id="main" class="medium-8 large-8 medium-push-4 columns" role="main">
.....main content
</main>
<aside id="sidebar1" class="sidebar medium-4 large-4 medium-pull-8 columns" role="complementary">
.....sidebar content
</aside>

</div>
 
Here is an instructional video Zurb provides explaining how to use the source ordering classes. https://www.youtube.com/watch?v=k1zizfK2xbQ

Ryan Patterson commented on Shawn Jones's post 18 days

Hi Shawn, 
I got you, that makes sense. I can't provide any help with overriding the flyout when using the dropdown menu, at least not without spending time messing around with code. I have a feeling you would have to write some custom javascript. 
How is your menu being generated? One possible hacky solution would be to not place the 3rd level items in a nested ul, but put as list items in same level as the parent, give a class to those 3rd level items and indent/style using css. Probably not the solution you were hoping for. 
Good luck man, hopefully someone else can provide some instructions on how to override the flyout. 

Ryan Patterson commented on Alex Skalx's post 19 days

Gotcha. Alright, well best of luck to you!

Ryan Patterson commented on Shawn Jones's post 19 days

Shawn,
 
So are you wanting the 3rd level items to display under the parent when you hover on the parent item. That seems like it would be a bit wonky, causing the dropdown to grow and shrink every time you hover over a different menu item with a nested submenu. I've seen menu's like that and they are extremely annoying and can confuse users. 
Just something to think about before spending a bunch of time trying to figure out how to get that 3rd level menu items under it's parent, only to find out it produces undesirable results. 
Since it sounds like your menu is pretty robust, have you considered using a mega menu. There is tutorials/code examples in Zurb's Building Blocks for such a thing. http://foundation.zurb.com/building-blocks/blocks/topbar-mega-menu-dropdown.html
Just a thought!
 

Posts Followed

  • 2
    Replies
  • Range Slider in Foundation 6

    By mpaa

    range silderfoundation6

    I have problem with range slider. I can't move it. When I change number in input, everything is fine, but I can't move it. Where&nbsp;can be the problem? Below is my code:&nbsp; &nbsp; (Of course, I include also&nbsp;$(document).foundation(); )&nbsp; ... (continued)

    Last Reply by mpaa about 2 hours ago







  • 5
    Replies
  • Nested Dropdown Menus

    By Shawn Jones

    dropdown menu

    I am using nested menus in a dropdown menu. I want my level 3 menu to appear right under its parent, not as a flyout menu. In the screenshot below, Facilities is the parent of the level 3 menu. Screenshot:&nbsp;https://www.dropbox.com/s/9cs0cb5qwlr4tnu/S... (continued)

    Last Reply by Shawn Jones 18 days ago





Following

    No Content

Followers

My Posts

My Comments

You commented on mpaa's post 4 days

mpaa,
 
I just took your html, just the slider part and put it into a site I'm building using F6 (minified js and css versions) and the slider works great. I'm able to move it no problem. So your HTML isn't the problem. 
Have you used your browsers code inspector to see if there are any js errors? Do you have a live site we could check out first hand?

You commented on Tomasz Turowiecki's post 5 days

That's really strange. I just tested the .responsive-embed class on a site I'm building now with F6 (SASS version) and it's working perfectly. 
 
I just noticed your css rule is pretty much exactly what should be in the foundation.css. Did you look in your foundation.css file to see if the .responsive-embed css rule was in there?
The only reason I can think of why your foundation.css wouldn't have that css rule is if you did the Custom option when downloading the css version of Foundation and unchecked the responsive embed checkbox in the media section. 
If you didn't do the custom download option, then I have no idea why your foundation.css doesn't have the css for the responsive embed lol. 
The only other thing I can think of is if the container you added .responsive-embed to might of had some other class or ID on it that was applying conflicting styles. 

You commented on Wyeth Myers's post 6 days

Wyeth,
 
Sorry, forgot to address your question about the topbar height. I don't believe there is a height set on the top-bar, it gets it's height from the content + padding. So you could adjust the topbar padding or content's size and margin/padding to get the height you are looking for. However, the height may change depending on whether or not any content has to wrap when resizing the screen. This is why wouldn't want a fixed height.
I you're using SASS, there is a sass variable for the topbar padding, called $topbar-padding. If using plain old css, just adjust padding on .top-bar.
 
*EDITED*
 
Based off of your screenshot, you may have to adjust the padding on your navigation menu's anchor tags or li (depends on if you just want the text to be clickable), so that when you hover, the background fills the entire topbar. This would also mean you might need to remove the padding from the top bar, and add the difference to the anchor tags. 
 
So if your navigation menu's anchor tags or li's are lets say 20px tall (thats font size and line height factored in), you would need to add 1.40625rem (22.5px) of both top and bottom padding. That would create 45px of total padding, add that to your 20px tall nav items, and it would make your topbar 65px tall (if you removed topbar padding altogether)
 
Hope that helps. 

You commented on Wyeth Myers's post 6 days

Hi Wyeth,
So I would have to play around with the code to figure out how to get the submenu to span the full width of the content area. 
As for making the submenu horizontal rather than vertical. You can do this easily by replacing .vertical with .horizontal on your sub-menu UL's. 
Also, this is unrelated to your question, but you probably don't need to put your logo in a drilldown/dropdown menu with the logo being the only list item. Just a thought. 
I'll do a test and see if I can get the submenu to span full width.
 
Thanks, 
Ryan

You commented on Tomasz Turowiecki's post 6 days

Hi Thomasz,
 
Glad to hear you figured out the manual css way to make an embed responsive. For future purposes, you can use Foundation's
.responsive-embed
class. Just add that class to the container element the embed/iframe is in. 
 
For more info, you can refer to the responsive embed section of the F6 docs at http://foundation.zurb.com/sites/docs/responsive-embed.html

You commented on Sandra John's post 11 days

Sandra,
 
 
You have a bootstrap website and your asking for php/mysql help. You are in the wrong place, this is a support forum for Foundation. Please go to stackoverflow for these types of questions. 

You commented on T Davis's post 12 days

Hi T,
 
You should be able to use the source ordering classes. So I would do something like: 
 
<div class="row" id="container-wrapper">
<main id="main" class="medium-8 large-8 medium-push-4 columns" role="main">
.....main content
</main>
<aside id="sidebar1" class="sidebar medium-4 large-4 medium-pull-8 columns" role="complementary">
.....sidebar content
</aside>

</div>
 
Here is an instructional video Zurb provides explaining how to use the source ordering classes. https://www.youtube.com/watch?v=k1zizfK2xbQ

You commented on Shawn Jones's post 18 days

Hi Shawn, 
I got you, that makes sense. I can't provide any help with overriding the flyout when using the dropdown menu, at least not without spending time messing around with code. I have a feeling you would have to write some custom javascript. 
How is your menu being generated? One possible hacky solution would be to not place the 3rd level items in a nested ul, but put as list items in same level as the parent, give a class to those 3rd level items and indent/style using css. Probably not the solution you were hoping for. 
Good luck man, hopefully someone else can provide some instructions on how to override the flyout. 

You commented on Alex Skalx's post 19 days

Gotcha. Alright, well best of luck to you!

You commented on Shawn Jones's post 19 days

Shawn,
 
So are you wanting the 3rd level items to display under the parent when you hover on the parent item. That seems like it would be a bit wonky, causing the dropdown to grow and shrink every time you hover over a different menu item with a nested submenu. I've seen menu's like that and they are extremely annoying and can confuse users. 
Just something to think about before spending a bunch of time trying to figure out how to get that 3rd level menu items under it's parent, only to find out it produces undesirable results. 
Since it sounds like your menu is pretty robust, have you considered using a mega menu. There is tutorials/code examples in Zurb's Building Blocks for such a thing. http://foundation.zurb.com/building-blocks/blocks/topbar-mega-menu-dropdown.html
Just a thought!
 

Posts Followed

Following

  • No Content

Followers

  • No Content