CodePen<\/a>.<\/p>\nMaking our responsive navigation work on mobile devices<\/h2>\n
![\"Time](\"https:\/\/static.gosquared.com\/images\/engineering\/17_10_17_navigation\/time-to-go-mobile.gif\")
<\/p>\n
So far we\u2019ve focused on the desktop experience for this navigation. But nowadays the mobile version of your experience is just as important, if not more so. <\/p>\n
Not only do mobile devices come with smaller screens, but they also have a different set of interactions – there\u2019s no such thing as a \u201chover\u201d state on a touch display without a mouse, for example.<\/p>\n
By and large browsers normalise these differences fairly well, so they are at least usable (for example, triggering a hover state after one tap, and the actual \u201cclick\u201d only on the second tap), but this often feels like a \u201cfix\u201d retrofitted to an experience solely to prevent it from being broken. So we decided to do away with the hover-based approach and create a better-designed experience for mobile devices.<\/p>\n
The mobile design calls for toggling the sub-navs between visible and hidden based on clicking or tapping the header of the corresponding section. This can also be achieved using CSS by incorporating a hidden checkbox and using the :checked<\/code> and ~<\/code> (sibling) rules.<\/p>\nThe changed markup looks something like this:<\/p>\n
<li>\n <input type=\"checkbox\" id=\"toggle\">\n <label for=\"toggle\">\n <a>Item<\/a>\n <\/label>\n <nav class=\"subnav\">\n ...\n <\/nav>\n<\/li><\/code><\/pre>\n\u2026 and the only change to the CSS to make this work is to add a rule that shows the subnav under :checked ~ .subnav<\/code>.<\/p>\nFor the whole of the rest of the mobile navigation we can reuse all of the existing markup we already have, simply overriding and resetting any rules we previously had to show subnavs as dropdowns.<\/p>\n
The end result is something like this (you\u2019ll need to view on CodePen and resize your browser to see the difference between desktop and mobile versions)<\/p>\n
![\"Building](\"https:\/\/static.gosquared.com\/images\/liquidicity\/17_10_23_nav_01@2x.png\")
<\/p>\n