Dear Community
i am a freelancer who uses Dreamweaver to design and code, currently moving into Responsive Web Design
i bought a responsive menu tool and used it to create a horizontal menu of (traditional standard) 960px width
it works perfectly on desktop screens (>1024px) and all smartphone screens (<700px) have the hamburger icon
however, on many tablet screens, depending on device orientation, the menu wraps onto 2 lines between 701px and 959px.
i am then informed that its not possible for this automatic tool to create responsive menus for ALL devices,
and that i should not be making menus so wide i.e. responsive menus should not be wide? or automatic menu tools do not actually work for wide menus on all devices?
the next suggestion was to customise the code to adjust the menu behaviour between 701px and 959px,
which is fine if you are an experienced CSS programmer but leaves me feeling slightly let down
and slightly worried that i now need more CSS skills to use this (supposedly) automatic responsive menu tool.
or maybe i am missing the point and soon most tablet users will have 1024px screens?
Hi escocia1. Yes, it’s a tricky issue. Personally, as long as the wrapping menu works OK, it might be fine to leave it, but there are other options. You know, given the length of the menu, it might be worth considering letting the hamburger version kick in earlier. That would be a very simple tweak to the CSS.
i completely agree, letting the hamburger version kick in earlier is the way to go, basically turning the horizontal menu into a vertical accordion, and one tap to open the accordion is no big deal, i think users are used to it on those small screens anyhow!
funny thing is the automatic menu i mentioned has a (forced) max-width setting of 700px for the vertical accordion, so we are still left having to tweak the code, which i guess is my only choice now…
Yes, although that’s the best option anyway. I know it’s not a nice thing to face at first, but having direct access to the code is so much better in the long run. Let us know if you need any help with it.
good news! they came up with a CSS tweak for the tablet version, single row with 8 buttons splits into an elegant 2 rows with 4 buttons, a PERFECT solution!
