"Elemental" - drop-down navigation not working on iPad
Permalink
Does anyone else have this problem?
I know there's no hover function on the iPad, but the submenus should at least open with a "tap".
I did change the typeface and some colors.
check here:
http://stagingseydoux.ch/index.php...
(NOTE the links above were for development of another site - they no longer apply)
Is there something I am missing or doing wrong?
I looked at some other Themes on the iPad, and Elemental is not the only one with problems.
I am using 5.7.3.1
(ADDITION)
Okay, now I have created a totally new install of C5 5.7.3.1, without doing anything to it, and there is no subnav on the iPad where there should be - by "Team"
http://stagingseydoux5.ch/
(NOTE the links above were for development of another site - they no longer apply)
All I need to know is - is this a glitch or can it be fixed? If it can be fixed, then how?
Thank you anybody!
I know there's no hover function on the iPad, but the submenus should at least open with a "tap".
I did change the typeface and some colors.
check here:
http://stagingseydoux.ch/index.php...
(NOTE the links above were for development of another site - they no longer apply)
Is there something I am missing or doing wrong?
I looked at some other Themes on the iPad, and Elemental is not the only one with problems.
I am using 5.7.3.1
(ADDITION)
Okay, now I have created a totally new install of C5 5.7.3.1, without doing anything to it, and there is no subnav on the iPad where there should be - by "Team"
http://stagingseydoux5.ch/
(NOTE the links above were for development of another site - they no longer apply)
All I need to know is - is this a glitch or can it be fixed? If it can be fixed, then how?
Thank you anybody!
This sounds like it might be a bug – we will take a look at it if it can get posted in the bug tracker.
Hello Andrew
Thanks for responding. I don't think this is a bug with Concrete5 per se - I think it might have to to with Bootstrap. As I am not Bootstrap savvy and the minified version sent me spinning, I paid a guy to fix the problem for me.
I include below the pragmatic work-around of simply resorting to the mobile navigation at a larger viewport size. So the little icon for the menu appears in portrait as well as landscape view on my iPad.
This is in the theme folder... (quite the Babuschka!)
applications/themes/mytheme/css/build/mobile/navigation.less
at about line 103 added this
If you are able to "fix" the original problem, I would be interested to know how you did it!
Great work so far on the new C5 5.7.3.1 Today I am working on learning Composer.
Thanks!
Arlene
Thanks for responding. I don't think this is a bug with Concrete5 per se - I think it might have to to with Bootstrap. As I am not Bootstrap savvy and the minified version sent me spinning, I paid a guy to fix the problem for me.
I include below the pragmatic work-around of simply resorting to the mobile navigation at a larger viewport size. So the little icon for the menu appears in portrait as well as landscape view on my iPad.
This is in the theme folder... (quite the Babuschka!)
applications/themes/mytheme/css/build/mobile/navigation.less
at about line 103 added this
/* START MODIFIED CSS */ div.ccm-page header nav ul{ margin-top: 13px !important; } .ccm-responsive-menu-launch{ margin-top:4px; } @media all and (min-width: 1081px) { .ccm-responsive-overlay { display: none !important; } } @media only screen and (min-width:@screen-xs-max) and (max-width: 1080px) { header .container .row > div { float: right;
Viewing 15 lines of 27 lines. View entire code block.
If you are able to "fix" the original problem, I would be interested to know how you did it!
Great work so far on the new C5 5.7.3.1 Today I am working on learning Composer.
Thanks!
Arlene
Arlene, this is still the case after a year. Did you find any other work around?
Sorry - no new solutions.
Any chance you could take a look at my navigation.less file (attached) and advise me where to put the code above? I've tried it in a couple of different locations but it doesn't seem to work. I'm new to this and this is pretty much the last piece I need to resolve before making this C5 site our active site.
Thanks so much!
Thanks so much!
I am just making sure, you are not using the file with the .txt still attached, correct? Wasn't sure if that was a requirement of the upload or not. In regard to the placement of the file, I would suggest using the Cloneamental theme which is a clone of the Elemental theme, but keeps it out of the core C5 files, which also allows you to modify the files more easily and prevents them from being overwritten should you upgrade C5.
The .txt ext was added so that I could upload it. It's not part of the real filename. And I am actually using Cloneamental now. I had started with Elemental, then found some posts about using Cloneamental for the reasons you mentioned. My apologies...I should have been more clear.
Thanks for the reply!
Thanks for the reply!
If you are replacing the existing file, place it into /packages/cloneamental/themes/cloneamental/css/build/mobile/. If you want it as a custom file, place it in /applications/themes/cloneamental/css/build/mobile/ (you may have to create these sub-directories).
I was modifying the one in /packages/cloneamental/themes/cloneamental/css/build/mobile/ but I'm not sure where inside the file to paste the code snippet above. I tried adding it around line 103 as mentioned, but I can't seem to get it to work.
arlenesey,
I'm still having issues with this. I attached my original navigation.less (with a .txt ext so I could upload it) without any modifications in my previous replay. Can you please help me figure out where to place the code you mentioned above within that attached file? I tried adding it to a few different locations, but it doesn't seem to work.
Thanks!!
I'm still having issues with this. I attached my original navigation.less (with a .txt ext so I could upload it) without any modifications in my previous replay. Can you please help me figure out where to place the code you mentioned above within that attached file? I tried adding it to a few different locations, but it doesn't seem to work.
Thanks!!
The changes I made (last year) may not be valid anymore. As I have not updated the site, I can't be sure that they will work with the latest version of Concrete5. I am in the same boat as you, because I paid a developer to help me out.
The best solution for you would be to start a new thread or pay for some assistance - there are a surprising number of freelancers who are good and looking for a few extra bucks.
I am sorry I can't help you further, but try the new thread first, and maybe you will have luck.
The best solution for you would be to start a new thread or pay for some assistance - there are a surprising number of freelancers who are good and looking for a few extra bucks.
I am sorry I can't help you further, but try the new thread first, and maybe you will have luck.
Hello All,
Just curious.... I am having the same issue with the drop down menu.
Works fine on a computer with hover... drops down, no issues.
Works fine on a mobile device...
Cannot get drop down menu to "drop" on a tablet...
Any help is appreciated...
Thanks!
Just curious.... I am having the same issue with the drop down menu.
Works fine on a computer with hover... drops down, no issues.
Works fine on a mobile device...
Cannot get drop down menu to "drop" on a tablet...
Any help is appreciated...
Thanks!
Hi!
Yes, I've noticed that too. Maybe you could try adding this script to your page:
This should make the dropdown appear on tablets when you first tap on the parent menu item. If you tap on it again, then the link will work normally. That's a solution some people use to simulate hover events on touch devices (the first tap acts as a hover, the second tap acts as a click).
You should test this on different devices before using it on a live site.
Jordi
Yes, I've noticed that too. Maybe you could try adding this script to your page:
<script type="text/javascript"> $( document ).ready(function() { $('.ccm-responsive-navigation.original ul li').has('ul').one("touchstart", function(e) { $(this).one('click', function(e) { e.preventDefault(); }); }); }); </script>
This should make the dropdown appear on tablets when you first tap on the parent menu item. If you tap on it again, then the link will work normally. That's a solution some people use to simulate hover events on touch devices (the first tap acts as a hover, the second tap acts as a click).
You should test this on different devices before using it on a live site.
Jordi
Hi Jordi - Question - is there a way to add extra scripts like this in the interface, (like custom css) or do we have to muck about in the elements files - I am guessing header.php?
Hi!
If you don't want to edit the theme files, you have two options:
A) Go to Dashboard -> System & Settings -> SEO & Statistics -> Tracking Codes. Paste the code there (below your Google Analytics code if you are using it).
B) Add an HTML block to a Sitewide area (for instance the same area where your menu is) and paste the code there.
By the way, I've updated the code I posted above (it worked well in my head, but not so well on a real tablet :)
Let me know if this works for you,
Jordi
If you don't want to edit the theme files, you have two options:
A) Go to Dashboard -> System & Settings -> SEO & Statistics -> Tracking Codes. Paste the code there (below your Google Analytics code if you are using it).
B) Add an HTML block to a Sitewide area (for instance the same area where your menu is) and paste the code there.
By the way, I've updated the code I posted above (it worked well in my head, but not so well on a real tablet :)
Let me know if this works for you,
Jordi
Hello Jordi,
Thank you so much!!! It works!
Just like the script says... touchstart
I greatly appreciate your help...
Cheers!
Thank you so much!!! It works!
Just like the script says... touchstart
I greatly appreciate your help...
Cheers!
Thank you. Great suggestions!
Arlene
Arlene
Thank you! This made things easier!
At some sites I have used MegaMenu, which works fine with iPad. But sometimes this simple fix is ... simpler!
Paivi
At some sites I have used MegaMenu, which works fine with iPad. But sometimes this simple fix is ... simpler!
Paivi
I spotted exactly the same issue with the Ipad drop down menu just a couple of days ago so was pleased to see this thread and workaround. I pasted Jordi's code in below the Google Tracking code as suggested and hey presto, all sorted on the ipad. Many thanks indeed.
