Menu icon Foundation

Developer

My Posts


My Comments

Trying To Be Helpful commented on BGMcKenzie's post about 4 years

See [ https://developers.google.com/youtube/iframe_api_reference ] for reference/info.

Old, but might help explain [ http://www.lunametrics.com/blog/2012/10/22/automatically-track-youtube-videos-events-google-analytics/ ].

Yes, you have to call/initiate the YT video via script parameters which loads the embed into a div... but bet you could still wrap the container div in another "flex-video" div. All called in from a modal.

Good luck!

Trying To Be Helpful commented on Baskar Gnanavelu's post almost 5 years

Since Foundation tabs and accordion menus both use Definition Lists and Divs... I'd suggest you replace [ dl class="tabs vertical" data-tab ] with [ dl class="accordion" data-accordion ] using jQuery for your mobile breakpoint and alter accordingly.

Or create both tab and accordion menus but show tabs for medium and up & accordion for small only. It is extra HTML, but easier if you can't code a switcheroo. GOOD LUCK!

BTW, please search the forum first... as this question has been asked multiple times:

» http://foundation.zurb.com/forum/posts/1678-how-to-change-f5-tabs-in-accordion--in-small-screens

» http://foundation.zurb.com/forum/posts/860-switching-tabs-to-accordian-for-small-screens

» http://foundation.zurb.com/forum/posts/2278-convert-tabs-to-accordian-for-small

Trying To Be Helpful commented on Ulrich Ullmann's post almost 5 years

Hi Ulrich! Please define what you mean by "navigation doesn't work" ~ do you mean the links won't "click", any dropdowns don't activate, no nav links show up on sticky, etc.?

Have you altered any CSS to possibly change z-index?

Paste your top-bar code and someone can test it or identify what may be the problem. Thanks!

Trying To Be Helpful commented on Liangtai's post almost 5 years

Someone smarter can provide a better reply... but this is what I did to change the hamburger icon to a "X" icon [ on mobile only ]:

I am using a jQuery resize function to change sub-navs into dropdown buttons on mobile, so after targeting my "small" breakpoint, I have the following

 // change hamburger icon to X
            $('.menu-icon').on('click', function () {
                $(this).children('span').replaceWith('<i class="icon-class-here-for-new-icon"></i>');
            });
            // changes X back to hamburger icon
            $('a.exit-off-canvas').on('click', function () {
                $('.menu-icon').children('i').replaceWith('<span></span>');
            });

What is happening is when the hamburger icon (.menu-icon) is clicked, I replace the empty <span> with a new icon. Then, when the .exit-off-canvas overlay is clicked - I replace the custom icon with the empty <span> tags again to put the hamburger icon back. Not the best method, but it works for me.

BTW, I use <span> tags for my icon fonts, not <i> (because italic tags don't make sense IMO) but had to use <i> in this case since the hamburger icon gets applies to the <span> tag and I didn't want to fight the CSS. You could use an image, a text character, icon, etc.

Remember, I am doing this only on small, but that probably doesn't matter overall. Hopefully this can help get you started or someone else can offer a better solution. Maybe ZURB will eventually add this functionality ; )

FYI: Karl Ward on the Foundation Forum does it way better if you want to check out his site at [ http://mjau-mjau.com/ ].

Trying To Be Helpful commented on Ashish Agarwal's post almost 5 years

I just wrap my row in another <div> that contains a "full-width" class and whatever bg color class I want.

I have footers that go full width already, so I just style their class or id to whatever background color I want (plus any extra padding on top and bottom) and it works fine.

What you did is fine, just maybe use a class instead of inline-style for better management. GOOD LUCK!

Trying To Be Helpful commented on Kyle Sturman's post almost 5 years

The answer from Dallas worked fine for me to center the carousel, THANKS!

Trying To Be Helpful commented on Jon Sharpe's post almost 5 years

Thanks Josh!

Having same issue = where each caption contained a link to a sub-page -- but only the last slide's caption/link was being registered. Guess it had to do with the stacking/z-index order, because my slides and captions would change, but the link stayed the same (like an invisible layer over the others).
= but Josh's CSS fix above solved the issue!

EDIT: Josh's fix works for Chrome, but not Firefox » I had to add a higher z-index to both

.orbit-container .orbit-prev, .orbit-container .orbit-next { ... }
.orbit-container .orbit-timer { ... }

to get the controls to show OVER the active image

Trying To Be Helpful commented on john's post about 5 years

Having the same issue as John with 5.2.2 = magellan sub-nav won't stay "fixed" when top-bar is "sticky" (magellan activates and active classes work, but scrolls with the page and gets covered up/lost).

David's margin-top fix to the sub-nav works, but would love a proper top-offset fix (will check out the pull).

Trying To Be Helpful commented on THG's post about 5 years

Me thinks the load delay is due to the Vimeo video being loaded. Have you tried your exact script with a placeholder instead of the video embed? See if that loads fine w/Reveal but w/o the video.

Maybe you could add something to defer the loading, or call in the iframe when it is needed. Not sure, sorry.

Trying To Be Helpful commented on ant carter's post about 5 years

Yes, it appears that you are not calling in a custom stylesheet (aside from the WP theme) to override the default Foundation styles. A stylesheet called in BEFORE the Zurb Foundation one, at least.

See this page [ http://foundation.zurb.com/docs/css.html ] for info.

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

So, adding the custom styles to your [ wp-forge-child/style.css ] stylesheet won't work since it is being called in after the foundation.css -- so maybe play around with adding a new one (but that adds another HTTP Request) or adding the style directly in your Wordpress header file.

I hope reducing the font-size works, as you don't want to go too small -- but maybe someone else can reply in regards to setting the mobile/small menu version for medium screens. I think it may have something to do with the media query breakpoints.

Posts Followed







  • 74
    Replies
  • Foundation 5 and IE8

    By James Cocker

    ie8Foundation 5usage

    Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 wi... (continued)

    Last Reply by manav singh 6 months ago


Following

    No Content

Followers

My Posts

My Comments

You commented on BGMcKenzie's post about 4 years

See [ https://developers.google.com/youtube/iframe_api_reference ] for reference/info.

Old, but might help explain [ http://www.lunametrics.com/blog/2012/10/22/automatically-track-youtube-videos-events-google-analytics/ ].

Yes, you have to call/initiate the YT video via script parameters which loads the embed into a div... but bet you could still wrap the container div in another "flex-video" div. All called in from a modal.

Good luck!

You commented on Baskar Gnanavelu's post almost 5 years

Since Foundation tabs and accordion menus both use Definition Lists and Divs... I'd suggest you replace [ dl class="tabs vertical" data-tab ] with [ dl class="accordion" data-accordion ] using jQuery for your mobile breakpoint and alter accordingly.

Or create both tab and accordion menus but show tabs for medium and up & accordion for small only. It is extra HTML, but easier if you can't code a switcheroo. GOOD LUCK!

BTW, please search the forum first... as this question has been asked multiple times:

» http://foundation.zurb.com/forum/posts/1678-how-to-change-f5-tabs-in-accordion--in-small-screens

» http://foundation.zurb.com/forum/posts/860-switching-tabs-to-accordian-for-small-screens

» http://foundation.zurb.com/forum/posts/2278-convert-tabs-to-accordian-for-small

You commented on Ulrich Ullmann's post almost 5 years

Hi Ulrich! Please define what you mean by "navigation doesn't work" ~ do you mean the links won't "click", any dropdowns don't activate, no nav links show up on sticky, etc.?

Have you altered any CSS to possibly change z-index?

Paste your top-bar code and someone can test it or identify what may be the problem. Thanks!

You commented on Liangtai's post almost 5 years

Someone smarter can provide a better reply... but this is what I did to change the hamburger icon to a "X" icon [ on mobile only ]:

I am using a jQuery resize function to change sub-navs into dropdown buttons on mobile, so after targeting my "small" breakpoint, I have the following

 // change hamburger icon to X
            $('.menu-icon').on('click', function () {
                $(this).children('span').replaceWith('<i class="icon-class-here-for-new-icon"></i>');
            });
            // changes X back to hamburger icon
            $('a.exit-off-canvas').on('click', function () {
                $('.menu-icon').children('i').replaceWith('<span></span>');
            });

What is happening is when the hamburger icon (.menu-icon) is clicked, I replace the empty <span> with a new icon. Then, when the .exit-off-canvas overlay is clicked - I replace the custom icon with the empty <span> tags again to put the hamburger icon back. Not the best method, but it works for me.

BTW, I use <span> tags for my icon fonts, not <i> (because italic tags don't make sense IMO) but had to use <i> in this case since the hamburger icon gets applies to the <span> tag and I didn't want to fight the CSS. You could use an image, a text character, icon, etc.

Remember, I am doing this only on small, but that probably doesn't matter overall. Hopefully this can help get you started or someone else can offer a better solution. Maybe ZURB will eventually add this functionality ; )

FYI: Karl Ward on the Foundation Forum does it way better if you want to check out his site at [ http://mjau-mjau.com/ ].

You commented on Ashish Agarwal's post almost 5 years

I just wrap my row in another <div> that contains a "full-width" class and whatever bg color class I want.

I have footers that go full width already, so I just style their class or id to whatever background color I want (plus any extra padding on top and bottom) and it works fine.

What you did is fine, just maybe use a class instead of inline-style for better management. GOOD LUCK!

You commented on Kyle Sturman's post almost 5 years

The answer from Dallas worked fine for me to center the carousel, THANKS!

You commented on Jon Sharpe's post almost 5 years

Thanks Josh!

Having same issue = where each caption contained a link to a sub-page -- but only the last slide's caption/link was being registered. Guess it had to do with the stacking/z-index order, because my slides and captions would change, but the link stayed the same (like an invisible layer over the others).
= but Josh's CSS fix above solved the issue!

EDIT: Josh's fix works for Chrome, but not Firefox » I had to add a higher z-index to both

.orbit-container .orbit-prev, .orbit-container .orbit-next { ... }
.orbit-container .orbit-timer { ... }

to get the controls to show OVER the active image

You commented on john's post about 5 years

Having the same issue as John with 5.2.2 = magellan sub-nav won't stay "fixed" when top-bar is "sticky" (magellan activates and active classes work, but scrolls with the page and gets covered up/lost).

David's margin-top fix to the sub-nav works, but would love a proper top-offset fix (will check out the pull).

You commented on THG's post about 5 years

Me thinks the load delay is due to the Vimeo video being loaded. Have you tried your exact script with a placeholder instead of the video embed? See if that loads fine w/Reveal but w/o the video.

Maybe you could add something to defer the loading, or call in the iframe when it is needed. Not sure, sorry.

You commented on ant carter's post about 5 years

Yes, it appears that you are not calling in a custom stylesheet (aside from the WP theme) to override the default Foundation styles. A stylesheet called in BEFORE the Zurb Foundation one, at least.

See this page [ http://foundation.zurb.com/docs/css.html ] for info.

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

So, adding the custom styles to your [ wp-forge-child/style.css ] stylesheet won't work since it is being called in after the foundation.css -- so maybe play around with adding a new one (but that adds another HTTP Request) or adding the style directly in your Wordpress header file.

I hope reducing the font-size works, as you don't want to go too small -- but maybe someone else can reply in regards to setting the mobile/small menu version for medium screens. I think it may have something to do with the media query breakpoints.

Posts Followed

Following

  • No Content

Followers

  • No Content