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

Hi Joanne,

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

thanks
Paul

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

Is the site going on to a development server before it goes fully live?

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

Are you still having problems with this?

Cheers
Paul

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

Are the row settings set to do anything like stack?

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

hmm I wondering if the change isn't saving

Are other settings saving ok?

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

Hi joanne,

We can take a look if create a ticket

Cheers
Paul