Joomla Templates Club 406,261 posts

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#204742

Hey!

I have a problem regarding the menu from JA_Appolio, the problem is that is isn’t working on the iPad.
Does anyone have a solution for this? The url is http://www.elkedruppeltelt.nl.

Thanks!:laugh:

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#563451

Hmm or how can I hide the main-menu on the ipad and instead of the main-menu, the off page canvas?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#563584

Hi @kelvin899,

Please open file root_folder/templates/mozambique/css/custom.css and add this code :

#t3-header .off-canvas-toggle {
margin: 0;
position: fixed;
}

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#563623

Nobody could help me? :((

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#563723

Hi @kelvin899,

Please try the solution in my previous reply and let me know if you still need further assistance.

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#563789

Whoops, sorry Adam! I saw probably your reply to late. I will try this out, thanks!

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#563792

<em>@Adam M 464071 wrote:</em><blockquote>Hi @kelvin899,

Please open file root_folder/templates/mozambique/css/custom.css and add this code :

#t3-header .off-canvas-toggle {
margin: 0;
position: fixed;
}
</blockquote>

I just tried this out, but it wasn’t what I really mean. If I go with the iPad for example to http://www.elkedruppeltelt.nl/project/mozambique there is also the main menu. (Not the off canvas) if I click on a menu item, it works. But it only isn’t working on the front page.

Are there element which are ” over” the main menu or something? Which prevents me for clicking on it? Thanks so far!

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#563861

Hi @kelvin899,

Do you mean the menu in attachment screenshot ? I tested your site with an iPad but didn’t see any problem as I can navigate to other pages via this menu.

---

Attachments:

1. 

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#563907

Hey Adam,

I meant the menu on the homepage (http://www.elkedruppeltelt.nl), with the green tabs. That menu isn’t working on the iPad. But the same menu does work on other pages (you cant see it on other pages, because its hidden behind JA_Promobar).

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#564203

Hi @kelvin899,

If you open file http://www.elkedruppeltelt.nl/templates/mozambique/css/bootstrap.css, and look for this code :

.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}

you will see it’s defined inside :

@media (min-width: 992px)

that mean if the viewport is smaller than 992px, it will be hidden (this value in default template is 768px).

Try open file http://www.elkedruppeltelt.nl/templates/mozambique/css/custom.css and add this code :

@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-nav > li {
float: left;
}
}
body {
padding-top: 54px !important;
}
.ja-promo-bar {
top: -54px !important;
}

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#564282

Hey Adam,

Thanks for your help so far!

After I tried your code, its still not working as it should be.
The menu on the homepage(menu with the green tabs) isn’t clickable on a iPad. When I click on the menu nothing happens.

I hope you understand what I mean.

Thanks again!:laugh:

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#564351

Hi @kelvin899,

Try adding this code to custom.css file and recheck. If it doesn’t solve your problem, please provide a temporary FTP account via private reply so I can take a closer look and fix it for you.

.t3-mainnav {
position: relative;
}

[kelvin899 Friend kelvin899Join date: January 2013Posts: 63Downloads:5Uploads:16 Thanks: 15 Thanked: 2 times in 1 posts]

#564445

<em>@Adam M 465109 wrote:</em><blockquote>Hi @kelvin899,

Try adding this code to custom.css file and recheck. If it doesn’t solve your problem, please provide a temporary FTP account via private reply so I can take a closer look and fix it for you.

.t3-mainnav {
position: relative;
}
</blockquote>

Adam,

Your the best, this fixed the issue. I can click it now on the iPad. Super! Thank you so much!

[Author]

Posts