I have spent some significant time designing my website in the 960px layout. Having finished it, the time finally came to add 320px and start rearranging.
So I switched on 320px (for the first time), moved logo, resized a bit of text, and converted the menu to hamburger, and repositioned it on the screen to suit the mobile layout.
Imagine my horror, when I just checked the 960px render in safari, and discovered that my menu had disappeared except for ‘home’, and that the remaining items in the ‘menu element’ were greyed out. ‘Home’ had also moved to a random place in the header…
I am totally bewildered as to why this happened. After much fiddling (and swearing) the only way I could fix it was to click the “same size” checkbox under the menu element, and them select each menu item and click the little ‘hidden element’ button just under the menu element.
I’d like to understand what went wrong, so I can try and avoid it happening again - it is things like this that really slow website design!