Joomla Templates Club 406,261 posts

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#195528

Hi,

How do you adjust the mainmenu so that the off canvas menu appears instead on the iPad, as it does on smartphones?
Basically I just need the menu to change into off canvas with a bigger screen layout out than it does now.

I can not find the media screen class for this to happen.

Cheers

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#525992

You can open the file: /templates/ja_appolio/less/variables.less, then look at this line of code:


// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-sm-min;


If you want the off canvas menu appears on the iPad, you can change it to:


@grid-float-breakpoint: @screen-md-min;


then go to backend of your website > click ‘Compile less to css’ button. Remember to BACKUP your site first before compiling less to css as this process will override all current css files in your site.

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#526239

Thanks Saguaros,

However, this is not excactly what I was trying to achieve. I have attached a screenshot.

1. is what I am trying to achieve

2. is the standard layout, which basically means that you can not have more than two menus in the navbar. I currently have four, so the other two is hidden underneath the searchbar.

3. is after changing @screen-sm-min to @screen-md-min as you suggested.

cheers

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#526306

I will check this again to see what’s going wrong here.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#526493

You can try opening file: /templates/ja_appolio/css/custom.css (if this file is not existing now, just create it)

and add this CSS rule:

@media (max-width: 1023px) and (min-width: 768px){
.t3-header .off-canvas-toggle {
float: right;
margin-right: 15px;
margin-top: 8px;
}

.t3-header .pull-right {
top: -8px !important;
}
}


1 user says Thank You to Saguaros for this useful post

1. iaassens

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#526562

Hi Saguaros,

That did align the off-canvas menu to the right and everything looks much better. However, the menu is not clickable in before the layout of the content rearranges as well.

cheers,

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#526715

Please try to edit the above CSS rule a little bit:


@media (max-width: 1023px) and (min-width: 768px){
.t3-header .off-canvas-toggle {
float: right;
margin-right: 15px;
margin-top: 8px;
}

.t3-header .pull-right {
right: 51px;
}

.head-right > div {
padding: 0;
}
}


1 user says Thank You to Saguaros for this useful post

1. iaassens

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#527223

Hi Saguaros,

I actually wanted it to change the content layout aswell and not just the mainav. Looking like attached.
The pull-right parallax positions itself above the pull-left content just like on mobile layout.

Also, there are still some minor glitches with the css, the discover for free button now moves down when scaling the site.

thanks again though.
cheers.

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#527251

If your site is online now, you can post URL here and screenshots explaining how you want to achieve so that I can have a closer look and give you better solution.

[Author]

Posts