Must Read: New Unified System is officially live Must Read     |   6 Templates Updated (27 April 2018) Read more

Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Break points

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi Again,

I don't understand how the break points work in the template. The default is set to 787 for tablets, grid collapse and nav collapse -- and 620 for phones.

If I use the developer tools in FF the screen sizes are: 360x640, 768x1024, 800x1280, 980x1280, 1280x600 and 1920x900.

If I use the developer tools in Chrome the sizes are: 320x480, 480x320, 600x800, 800x600, 768x1024 and 1024x768.

Where does the 787 fit into all that? I don't get a menu at all in FF at 800x1280 and 980x1280.

In Chrome the menu wraps at 800x600 instead of collapsing.

Just to make things easier, I'd like to set the menu to collapse at anything smaller than 1280 and be done with it.

I've been fooling around with the numbers but can't seem to satisfy all these different screen sizes.

What should the nav collapse be set to?

Thanks for any help.

Joanne
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Joanne,

Can you attach a screen shot of your settings and a link for the site?

thanks
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

I have attached the screen shot. the url is: pinatel721.com/usnf/

The site is not live yet. I'm having trouble with the mobile devices. The drop downs in the toggle menu are so long they go off the screen and when the user tries to scroll the menu, the web site in the background scrolls instead.

I appreciate your help!

Joanne
Attachments:
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
Is the site going on to a development server before it goes fully live?
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

No, the site is moving back to it's original host once it's done.

The bigger issue now is the mobile menu. The background scrolls instead of the menu on phones. I tried to find an answer using css but I think it might need a javascript solution?

Thanks,

Joanne
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
Are you still having problems with this?

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Not with the mobile menu -- I used off canvas as you suggested. I am still a little foggy on the breakpoints for the menu. If I want all screens 1280 px wide and under, where do I put that number?

If I put it in nav collapse, it doesn't seem to do anything. The break points confuse me. There are so many devices to accommodate -- I thought just having it collapse at 1280 would be an easy solution.

Joanne
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
Are the row settings set to do anything like stack?
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I had "stack" on the menu row.

I took it off and set nav collapse to 1280. (cleared cache etc). Tested in developer tools responsive design mode. Menu still wraps at 1280.

Set the nav collapse to 1300. Still no collapse at 1280 -- menu wraps.

If the template manager isn't going to work and I were going to do it in css instead, would I put

@media screen and (min-width: 1280px;){
{.off-canvas-trigger: visible;}
}

or something?

Joanne
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
hmm I wondering if the change isn't saving

Are other settings saving ok?
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Everything seems to be saving and working fine. It just doesn't matter what numbers I put in as break points -- 800px, 1280px, 1300px whatever -- the numbers are still there when I go back in to check but nothing changes on the front end. The menu collapses at 787px no matter what. Which is a good thing! I just wanted it to collapse earlier.

Joanne
  • joanne721's Avatar
  • joanne721
  • 6 Month Developer
  • 285 posts
  • Karma: 0
The administrator has disabled public write access.
Hi joanne,

We can take a look if create a ticket

Cheers
Paul
  • paulus103's Avatar
  • paulus103
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers