Joomla Templates Club 406,261 posts

[Upendra Friend UpendraJoin date: January 2011Posts: 84Downloads:28Uploads:17 Thanks: 13 Thanked: 1 times in 1 posts]

#199055

I want to enable only Off Canvas menu for Ipad, currently I have 4 column submenu and that shows the drop down menu weird. I only want to show Off Canvas menu for Ipad and other similar size tablets and want to hide native dropdown menu. I have no issues with other smaller devices, even when the Ipad is in portrait mode, it only show off canvas, when I go to landscape mode it shows the menu and looks ugly.
Thank you in advance!

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

#539813

Please open the file root_folder/templates/ja_decor/css/custom.css (create a new one if you don’t have this file) and add this rule:

@media (min-width: 768px) and (max-width: 992px) {
.navbar-collapse.collapse {
display: none !important;
}
}

Save your file and check again.

1 user says Thank You to Adam M for this useful post

1. Upendra

[Upendra Friend UpendraJoin date: January 2011Posts: 84Downloads:28Uploads:17 Thanks: 13 Thanked: 1 times in 1 posts]

#539848

Worked, great!

[zalchris Friend zalchrisJoin date: March 2008Posts: 14Downloads:17Uploads:1 Thanks: 1]

#541511

The megamenu disappears, but off-canvas will only be shown on a smaller resolution.
How can I ensure that off-canvas is displayed in a smaller width than 1200px?
Thanks for your help!

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

#541674

Hi zalchris,

Could you please provide your site url so I can have a look ?

[zalchris Friend zalchrisJoin date: March 2008Posts: 14Downloads:17Uploads:1 Thanks: 1]

#541844

Hi Adam,
my site url: http://www.cellfloc.com
Thank you!

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

#541970

Hi,

Please navigate to Admin >>> Extensions >>> Template Manager >>> choose your current template >>> switch to tab Layout >>> next, switch to tab Responsive Layout >>> There are 4 views : Large, Medium, Small and Extra Small >>> make sure you only disable the Off-Canvas in Large screen.

[zalchris Friend zalchrisJoin date: March 2008Posts: 14Downloads:17Uploads:1 Thanks: 1]

#542247

Hi Adam!
I have made ​​the settings, but the off-Canvas menu still does not appear.
I want to show off the canvas menu starting with a resolution smaller than 1200 px.
How does this work?
Thank you!

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

#542346

Hi,

In this case, please open custom.css file and update previous CSS rule as below :

@media (min-width: 768px) and (max-width: 1200px) {
.navbar-collapse.collapse {
display: none !important;
}
.container {
position: relative;
}
.navbar-header {
display: block;
}
}

Save your file and recheck.

[zalchris Friend zalchrisJoin date: March 2008Posts: 14Downloads:17Uploads:1 Thanks: 1]

#542574

Hi Adam,

it doesn’t work :((
Neither the mega menu nor the off-Canvas menu is displayed between 992px and 1200px.
How can i solve that problem?

Thanks

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

#542797

Just update a few lines as below and it should work :

@media (min-width: 768px) and (max-width: 1200px) {
.navbar-collapse.collapse {
display: none !important;
}
.container {
position: relative;
}
.navbar-header {
display: block !important;
}
.logo-image a img {
max-height: 34px;
}
}

[Author]

Posts