Menu icon Foundation

Designer

My Posts



  • 1
    Reply
  • F6 disable dropdown hover on mobile only

    By Jade

    F6mobilemenu

    I'm having trouble switching to F6, specifically with the mobile menu. I got the mobile menu to work, but I can't figure out how to disable the dropdown hover on mobile only. I want to keep the hover for medium and large, but disable it for mobile so you ... (continued)

    Last Reply by Jade over 3 years ago


  • 2
    Replies
  • Topbar Breakpoint Ignored

    By Jade

    topbarbreakpointcss

    No matter what I change, the topbar breakpoint is ignored. I downloaded a custom build where I changed the breakpoint, and it doesn't change anything, it's still 640px no matter what I do. I've already made the changes suggested in the forums too, but dow... (continued)

    Last Reply by Jade almost 4 years ago


  • 1
    Reply
  • Mobile menu expands beneath content

    By Jade

    mobile menu

    I'm having trouble with my mobile menu. I don't have any dropdowns in there, just a single row of links, but when I click on the MENU link, it opens up beneath the content that's below it, instead of pushing the content down. I'm using Foundation 5, and I... (continued)

    Last Reply by Rafi Benkual over 5 years ago


  • 4
    Replies
  • Block grid too tiny and wrong number of columns

    By Jade

    block grid

    Yikes!! I'm having trouble using the block grid, I'm hoping someone might be able to help me on this one. I want to show 6 thumbnails in a row. All I can see is 3 in a row and they are shoved to the left of the web page and way too tiny. I have the c... (continued)

    Last Reply by Jade over 5 years ago



  • 7
    Replies
  • Mobile Menu Not Working

    By Jade

    topbarmenu-icon

    I think I just need a second set of eyes after trying so many things for so long, I can't figure this one out. I had it working at one point, now I can't get it to work at all. I have uploaded the Foundation 5 "/js" directory replacing the link to the ... (continued)

    Last Reply by Benjamin Pieres almost 4 years ago



My Comments

Jade commented on Jakub Minka's post about 2 years

Has anyone ever done this before? Implemented a Bootstrap menu in Foundation? I need to swap out the Foundation menu because nobody likes FOUC (too many complaints about it).
 
 

Jade commented on Jonathan Ireland's post about 2 years

@Joe Tannorella  --  Thanks, but still didn't work :(
 
I'm sure you probably would have posted here if you found a fix, but can't hurt to ask... Did you ever find anything that worked? I hate Bootstrap, but the menu doesn't do this, so I'm currently trying to find a way to implement JUST the bootstrap menu without messing anything up.

Jade commented on Jimena Prix's post about 2 years

I've been having this problem for so long I've gotten used to it already, but clients do complain about it. I've implemented the Preventing FOUC styles too, and it doesn't do anything at all.
 
Has anyone found a fix for this? Working on this now for the past 3 hours and still haven't found any way to stop this flash of the mobile menu on page load... I thought maybe I'd try searching for a script that would delay loading the entire HTML until the scripts load, that's not what I want to do of course, but I don't know what else to do with this menu. This doesn't seem to happen with Bootstrap, so why is it only in Foundation?

Jade commented on Alec Stewart's post over 2 years

@ColinMarshall  I tried codepen https://codepen.io/jadecactus/pen/jyQegE but it's not really working, You can check it out though, it has all the CSS and HTML there. Or if you would like to see the actual staging site, I can send a link privately (I can't post it here) - it's a WP site. Thanks!

Jade commented on Alec Stewart's post over 2 years

We've been struggling with this for some time now too, it's been consistent on all our sites, no matter what we've tried. I have the solution applied that's in the documentation for Preventing FOUC but it doesn't do anything.
Anyone ever solve this one? It never happens when I use Bootstrap, so why does it only happen with Foundation? My boss is starting to freak about it, wants me to start using Bootstrap instead (which I absolutely hate) so hoping this gets resolved soon.

Jade commented on Jade's post over 3 years

 omg. I'm an idiot.
 
I forgot to add the /vendor to 2 of the .js files links...
 
I'm so sorry!! The code I'm using above WORKS, if anyone's interested...
 
over n out...

Jade commented on Jade's post over 3 years

Forgot to mention I have an image for the mobile menu toggle, separately.  This was the plain HTML that works outside of wordpress:
 
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="large">
<div class="title-bar-title small-9 column"><a href="#"><img src="images/logo.png" alt="mylogoalt"></a></div>
<div class="hamburger small-3 column"><button class="menu-icon" type="button" data-toggle><img src="images/hamburger.png"></button></div>
</div>

<div class="top-bar menu-centered" id="main-menu">
<ul class="menu vertical large-horizontal" data-responsive-menu="accordion large-dropdown">
<li class="has-submenu">
<a href="#">Top Link</a>
<ul class="submenu mega menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Top Link</a></li>
<li class="join"><a href="#">Top Link</a></li>
<li><a href="#">Top Link</a></li>
<li><a href="#">Top Link</a></li>
</ul>
</div>

Jade commented on Jade's post over 3 years

I tried the Top Bar walker but it's not working properly, the hamburger is always there and when you resize smaller, the mobile menu is just expanded. Not sure what to change, really, I'm not very good with php.
 
This is my walker:
class gs_walker extends Walker_Nav_Menu {

/*
  • Add vertical menu class and submenu data attribute to sub menus */

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"submenu mega menu vertical\" data-submenu>\n";
}
}

//Optional fallback
function f6_topbar_menu_fallback($args)
{
/*
* Instantiate new Page Walker class instead of applying a filter to the
* "wp_page_menu" function in the event there are multiple active menus in theme.
*/

$walker_page = new Walker_Page();
$fallback = $walker_page->walk(get_pages(), 0);
$fallback = str_replace("<ul class='children'>", '<ul class="children submenu menu vertical" data-submenu>', $fallback);

echo '<ul class="menu vertical large-horizontal" data-responsive-menu">'.$fallback.'</ul>';
}
 
And this is the HTML to show the menu:
<div class="top-bar menu-centered" id="main-menu">
<?php wp_nav_menu( array(
'theme_location' => 'main_menu',
'container' => false,
'menu_class' => 'menu vertical large-horizontal',
'items_wrap' => '<ul class="%2$s" data-responsive-menu="accordion large-dropdown">%3$s</ul>',
'depth' => 0,
'walker' => new gs_walker
)
);
?>
</div>
 
I know it's messed up... The code I tested in plain HTML works perfectly, I just don't know how to create the walker for it.

Jade commented on Jade's post over 3 years

 OH!  I found the solution on stackoverflow. I had to change the surrounding UL to make it work:
 
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

Jade commented on Jade's post almost 4 years

Believe me, I've tried.

I ended up having to change everything to px. That always resolves the issue, this has happened many times before (several times). I always thought it was a known issue and that some day would be fixed, I didn't realize others weren't having the same problem.

Thanks anyway.

Posts Followed







  • 1
    Reply
  • Mobile menu expands beneath content

    By Jade

    mobile menu

    I'm having trouble with my mobile menu. I don't have any dropdowns in there, just a single row of links, but when I click on the MENU link, it opens up beneath the content that's below it, instead of pushing the content down. I'm using Foundation 5, and I... (continued)

    Last Reply by Rafi Benkual over 5 years ago


  • 4
    Replies
  • Block grid too tiny and wrong number of columns

    By Jade

    block grid

    Yikes!! I'm having trouble using the block grid, I'm hoping someone might be able to help me on this one. I want to show 6 thumbnails in a row. All I can see is 3 in a row and they are shoved to the left of the web page and way too tiny. I have the c... (continued)

    Last Reply by Jade over 5 years ago



  • 7
    Replies
  • Mobile Menu Not Working

    By Jade

    topbarmenu-icon

    I think I just need a second set of eyes after trying so many things for so long, I can't figure this one out. I had it working at one point, now I can't get it to work at all. I have uploaded the Foundation 5 "/js" directory replacing the link to the ... (continued)

    Last Reply by Benjamin Pieres almost 4 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Jakub Minka's post about 2 years

Has anyone ever done this before? Implemented a Bootstrap menu in Foundation? I need to swap out the Foundation menu because nobody likes FOUC (too many complaints about it).
 
 

You commented on Jonathan Ireland's post about 2 years

@Joe Tannorella  --  Thanks, but still didn't work :(
 
I'm sure you probably would have posted here if you found a fix, but can't hurt to ask... Did you ever find anything that worked? I hate Bootstrap, but the menu doesn't do this, so I'm currently trying to find a way to implement JUST the bootstrap menu without messing anything up.

You commented on Jimena Prix's post about 2 years

I've been having this problem for so long I've gotten used to it already, but clients do complain about it. I've implemented the Preventing FOUC styles too, and it doesn't do anything at all.
 
Has anyone found a fix for this? Working on this now for the past 3 hours and still haven't found any way to stop this flash of the mobile menu on page load... I thought maybe I'd try searching for a script that would delay loading the entire HTML until the scripts load, that's not what I want to do of course, but I don't know what else to do with this menu. This doesn't seem to happen with Bootstrap, so why is it only in Foundation?

You commented on Alec Stewart's post over 2 years

@ColinMarshall  I tried codepen https://codepen.io/jadecactus/pen/jyQegE but it's not really working, You can check it out though, it has all the CSS and HTML there. Or if you would like to see the actual staging site, I can send a link privately (I can't post it here) - it's a WP site. Thanks!

You commented on Alec Stewart's post over 2 years

We've been struggling with this for some time now too, it's been consistent on all our sites, no matter what we've tried. I have the solution applied that's in the documentation for Preventing FOUC but it doesn't do anything.
Anyone ever solve this one? It never happens when I use Bootstrap, so why does it only happen with Foundation? My boss is starting to freak about it, wants me to start using Bootstrap instead (which I absolutely hate) so hoping this gets resolved soon.

You commented on Jade's post over 3 years

 omg. I'm an idiot.
 
I forgot to add the /vendor to 2 of the .js files links...
 
I'm so sorry!! The code I'm using above WORKS, if anyone's interested...
 
over n out...

You commented on Jade's post over 3 years

Forgot to mention I have an image for the mobile menu toggle, separately.  This was the plain HTML that works outside of wordpress:
 
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="large">
<div class="title-bar-title small-9 column"><a href="#"><img src="images/logo.png" alt="mylogoalt"></a></div>
<div class="hamburger small-3 column"><button class="menu-icon" type="button" data-toggle><img src="images/hamburger.png"></button></div>
</div>

<div class="top-bar menu-centered" id="main-menu">
<ul class="menu vertical large-horizontal" data-responsive-menu="accordion large-dropdown">
<li class="has-submenu">
<a href="#">Top Link</a>
<ul class="submenu mega menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Top Link</a></li>
<li class="join"><a href="#">Top Link</a></li>
<li><a href="#">Top Link</a></li>
<li><a href="#">Top Link</a></li>
</ul>
</div>

You commented on Jade's post over 3 years

I tried the Top Bar walker but it's not working properly, the hamburger is always there and when you resize smaller, the mobile menu is just expanded. Not sure what to change, really, I'm not very good with php.
 
This is my walker:
class gs_walker extends Walker_Nav_Menu {

/*
  • Add vertical menu class and submenu data attribute to sub menus */

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"submenu mega menu vertical\" data-submenu>\n";
}
}

//Optional fallback
function f6_topbar_menu_fallback($args)
{
/*
* Instantiate new Page Walker class instead of applying a filter to the
* "wp_page_menu" function in the event there are multiple active menus in theme.
*/

$walker_page = new Walker_Page();
$fallback = $walker_page->walk(get_pages(), 0);
$fallback = str_replace("<ul class='children'>", '<ul class="children submenu menu vertical" data-submenu>', $fallback);

echo '<ul class="menu vertical large-horizontal" data-responsive-menu">'.$fallback.'</ul>';
}
 
And this is the HTML to show the menu:
<div class="top-bar menu-centered" id="main-menu">
<?php wp_nav_menu( array(
'theme_location' => 'main_menu',
'container' => false,
'menu_class' => 'menu vertical large-horizontal',
'items_wrap' => '<ul class="%2$s" data-responsive-menu="accordion large-dropdown">%3$s</ul>',
'depth' => 0,
'walker' => new gs_walker
)
);
?>
</div>
 
I know it's messed up... The code I tested in plain HTML works perfectly, I just don't know how to create the walker for it.

You commented on Jade's post over 3 years

 OH!  I found the solution on stackoverflow. I had to change the surrounding UL to make it work:
 
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

You commented on Jade's post almost 4 years

Believe me, I've tried.

I ended up having to change everything to px. That always resolves the issue, this has happened many times before (several times). I always thought it was a known issue and that some day would be fixed, I didn't realize others weren't having the same problem.

Thanks anyway.

Posts Followed

Following

  • No Content

Followers