"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!

arlenesey
View Replies: View Best Answer
andrew replied on at Permalink Reply
andrew
This sounds like it might be a bug – we will take a look at it if it can get posted in the bug tracker.
arlenesey replied on at Permalink Reply
arlenesey
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
/* 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;


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
TeKnoZiz replied on at Permalink Reply
TeKnoZiz
Arlene, this is still the case after a year. Did you find any other work around?
arlenesey replied on at Permalink Reply
arlenesey
Sorry - no new solutions.
cnd4ua replied on at Permalink Reply 1 Attachment
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!
TeKnoZiz replied on at Permalink Reply
TeKnoZiz
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.
cnd4ua replied on at Permalink Reply
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!
TeKnoZiz replied on at Permalink Reply
TeKnoZiz
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).
cnd4ua replied on at Permalink Reply
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.
cnd4ua replied on at Permalink Reply
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!!
arlenesey replied on at Permalink Reply
arlenesey
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.
puffers replied on at Permalink Reply
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!
jordif replied on at Permalink Best Answer Reply
jordif
Hi!

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
arlenesey replied on at Permalink Reply
arlenesey
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?
jordif replied on at Permalink Reply
jordif
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
puffers replied on at Permalink Reply
Hello Jordi,

Thank you so much!!! It works!
Just like the script says... touchstart

I greatly appreciate your help...

Cheers!
arlenesey replied on at Permalink Reply
arlenesey
Thank you. Great suggestions!

Arlene
PaiviK replied on at Permalink Reply
PaiviK
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
Joncope replied on at Permalink Reply
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.