{"action":"created","issue":{"url":"https://api.github.com/repos/artberri/sidr/issues/232","labels_url":"https://api.github.com/repos/artberri/sidr/issues/232/labels{/name}","comments_url":"https://api.github.com/repos/artberri/sidr/issues/232/comments","events_url":"https://api.github.com/repos/artberri/sidr/issues/232/events","html_url":"https://github.com/artberri/sidr/issues/232","id":51514347,"number":232,"title":"Show Slidr on larger screens and make it a slider on mobile?","user":{"login":"IngwiePhoenix","id":2893716,"avatar_url":"https://avatars.githubusercontent.com/u/2893716?v=3","gravatar_id":"","url":"https://api.github.com/users/IngwiePhoenix","html_url":"https://github.com/IngwiePhoenix","followers_url":"https://api.github.com/users/IngwiePhoenix/followers","following_url":"https://api.github.com/users/IngwiePhoenix/following{/other_user}","gists_url":"https://api.github.com/users/IngwiePhoenix/gists{/gist_id}","starred_url":"https://api.github.com/users/IngwiePhoenix/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IngwiePhoenix/subscriptions","organizations_url":"https://api.github.com/users/IngwiePhoenix/orgs","repos_url":"https://api.github.com/users/IngwiePhoenix/repos","events_url":"https://api.github.com/users/IngwiePhoenix/events{/privacy}","received_events_url":"https://api.github.com/users/IngwiePhoenix/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2014-12-10T03:28:46Z","updated_at":"2015-07-01T10:49:26Z","closed_at":null,"body":"Hey.\r\n\r\nI actually like side-panel menus and would like to have one that would stay permanently visible on a desktop, but would gladly fold away on a mobile device / smaller viewport. Is this possible with slidr?\r\n\r\nKind regards Ingwie."},"comment":{"url":"https://api.github.com/repos/artberri/sidr/issues/comments/117600433","html_url":"https://github.com/artberri/sidr/issues/232#issuecomment-117600433","issue_url":"https://api.github.com/repos/artberri/sidr/issues/232","id":117600433,"user":{"login":"peucaio","id":292803,"avatar_url":"https://avatars.githubusercontent.com/u/292803?v=3","gravatar_id":"","url":"https://api.github.com/users/peucaio","html_url":"https://github.com/peucaio","followers_url":"https://api.github.com/users/peucaio/followers","following_url":"https://api.github.com/users/peucaio/following{/other_user}","gists_url":"https://api.github.com/users/peucaio/gists{/gist_id}","starred_url":"https://api.github.com/users/peucaio/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/peucaio/subscriptions","organizations_url":"https://api.github.com/users/peucaio/orgs","repos_url":"https://api.github.com/users/peucaio/repos","events_url":"https://api.github.com/users/peucaio/events{/privacy}","received_events_url":"https://api.github.com/users/peucaio/received_events","type":"User","site_admin":false},"created_at":"2015-07-01T10:49:26Z","updated_at":"2015-07-01T10:49:26Z","body":"Hi Ingwie,\r\nI was having the same issue, and solved by using media queries to control the display of Sidr.\r\nPlease adapt for your use.\r\n\r\n```css\r\n/* for mobile */\r\n@media screen and (max-width: 48.24em) {\r\n\t/*sidr menu*/\r\n\t.sidr {\r\n\t\tdisplay: none;\r\n\t\tposition: absolute;\r\n\t\tposition: fixed;\r\n\t\ttop: 0px;\r\n\t\theight: 100%;\r\n\t\tz-index: 99999;\r\n\t\twidth: 260px;\r\n\t\toverflow-x: none;\r\n\t\toverflow-y: auto;\r\n\t}\r\n\t.sidr.right {\r\n\t\tleft: auto;\r\n\t\tright: -260px\r\n\t}\r\n\t.sidr.left {\r\n\t\tleft: -260px;\r\n\t\tright: auto\r\n\t}\r\n}\r\n\r\n/* from tablets up, reset sidr */\r\n\r\n@media screen and (min-width: 48.25em) {\r\n\t.sidr {\r\n\t\tdisplay: block;\r\n\t\tposition: inherit;\r\n\t\ttop: inherit;\r\n\t\theight: inherit;\r\n\t\twidth: inherit; }\r\n\t.sidr.right {\r\n\t\tleft: inherit;\r\n\t\tright: inherit; }\r\n\t.sidr.left {\r\n\t\tleft: inherit;\r\n\t\tright: inherit; }\r\n\tbody {\r\n\t\twidth: 100% !important;\r\n\t\tleft: inherit !important;\r\n\t\tright: inherit !important;\r\n\t\tposition: inherit !important; }\r\n}\r\n```\r\n\r\nHope it helps."}}