Menu icon Foundation
Some help with my Foundation template

HELP!
I'm using the Foundation framework to build a Joomla template. everything appears to be working OK apart form when the site is viewed on a mobile device (iPhone) the menu is collapsed correctly but you cannot click on it to open the menu!

What have I done, and how can I fix it?

Thanks!

My site is:

http://thebermudian.under-development.info/

joomlaresponsive menu

HELP!
I'm using the Foundation framework to build a Joomla template. everything appears to be working OK apart form when the site is viewed on a mobile device (iPhone) the menu is collapsed correctly but you cannot click on it to open the menu!

What have I done, and how can I fix it?

Thanks!

My site is:

http://thebermudian.under-development.info/

Julian Ćwirko over 5 years ago

you have

$(document).foundation();

try

jQuery(document).foundation();

Lee Tempest over 5 years ago

Julian,
Thanks for the advice, I have changed the script as you suggested but it is still not working? :-(

Any other ideas?

Thanks

Wing-Hou Chan over 5 years ago

Hey Lee!

Add data-topbar to nav. It should look like this:

<nav class="top-bar" data-topbar>

If the problem persists post again!

Lee Tempest over 5 years ago

Wing-Hou Chan,

Thanks for the advice, I have added the code to my nav as mentioned but nothing has changed. I can see the code in my Google Developer, but when I test on my iPhone emulator the code is not shown?

Can you see the data-topbar code?

Thanks

Lee

Wing-Hou Chan over 5 years ago

Hey Lee!

Thanks for the update. I'm not seeing it appear FF's and Chrome's Inspector or View Source. Check you have saved the files and uploaded them to the correct location.

Lee Tempest over 5 years ago

Wing-Hou Chan,
Can you check now? I can see it when I inspect the element via Chrome Dev Tools.

Lee

Wing-Hou Chan over 5 years ago

Hey Lee!

Nope still not seeing it. I know it's not a problem with Chrome or FF as data-topbar appears in the Inspector when I check out the topbar in Foundation's Docs.

Lee Tempest over 5 years ago

Wing-Hou Chan,
Serious apologies!! The site has now gone live and is under its live domain which is where I have been making the changes! Please check out:

http://www.thebermudian.com/

As the site is now live its a major issue the menu is not working!

Any help most appreciated!

Thanks

Lee

Steve Trask over 5 years ago

Hey Lee,

This looks like a Jquery issue make sure you are using the correct Jquery version for the version of Foundation as 5 uses version 2 and Foundation 4 is 1.10 (if my memory is correct) So this is throwing up an uncaught error on the foudation call also I would load it in the footer as below:

        <script src="/bower_components/jquery/jquery.js"></script>
        <script src="/bower_components/foundation/js/foundation.min.js"></script>
        <script async src="/js/app.js"></script>
        <script>
            $(document).foundation();
        </script>

Please note that the relative paths may be different and the async is for speed optimisation. This may be a conflict with Joomla as that runs on something else as I know drupal has the same issue.

Hope this helps and you get this sorted

Steve

Wing-Hou Chan over 5 years ago

+1 to Steve

I'm getting that error as well.

Brandon Arnold over 5 years ago

Hmm looking over the code there are a lot of things that could be responsible. Using Jquery 1.8 is the most likely candidate. There also appears to be tons of other items preventing the responsive nature of foundation from really working.