{"action":"opened","issue":{"url":"https://api.github.com/repos/CodyHouse/responsive-tabbed-navigation/issues/3","repository_url":"https://api.github.com/repos/CodyHouse/responsive-tabbed-navigation","labels_url":"https://api.github.com/repos/CodyHouse/responsive-tabbed-navigation/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/CodyHouse/responsive-tabbed-navigation/issues/3/comments","events_url":"https://api.github.com/repos/CodyHouse/responsive-tabbed-navigation/issues/3/events","html_url":"https://github.com/CodyHouse/responsive-tabbed-navigation/issues/3","id":332143449,"node_id":"MDU6SXNzdWUzMzIxNDM0NDk=","number":3,"title":"HOW CAN I MAKE IT VERTICAL AND ALSO PUT THE OUTPUT ON THE FRONT ","user":{"login":"Justinakpobi8","id":22532960,"node_id":"MDQ6VXNlcjIyNTMyOTYw","avatar_url":"https://avatars0.githubusercontent.com/u/22532960?v=4","gravatar_id":"","url":"https://api.github.com/users/Justinakpobi8","html_url":"https://github.com/Justinakpobi8","followers_url":"https://api.github.com/users/Justinakpobi8/followers","following_url":"https://api.github.com/users/Justinakpobi8/following{/other_user}","gists_url":"https://api.github.com/users/Justinakpobi8/gists{/gist_id}","starred_url":"https://api.github.com/users/Justinakpobi8/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Justinakpobi8/subscriptions","organizations_url":"https://api.github.com/users/Justinakpobi8/orgs","repos_url":"https://api.github.com/users/Justinakpobi8/repos","events_url":"https://api.github.com/users/Justinakpobi8/events{/privacy}","received_events_url":"https://api.github.com/users/Justinakpobi8/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-13T20:04:41Z","updated_at":"2018-06-13T20:04:41Z","closed_at":null,"author_association":"NONE","body":"I have been trying to fix this up and when i try it go messy. I want to make those icons vertical and the output at the front. This is the link to view the page http://apkstore.ezyro.com/\r\nHere is also the link if you want to download and maybe edit so you can help me https://github.com/CodyHouse/responsive-tabbed-navigation\r\nThis is how it really look\r\n![help](https://user-images.githubusercontent.com/22532960/41375043-b46d619c-6f09-11e8-84e3-7ee7c6d0dcc9.png)\r\n\r\n<!doctype html>\r\n<html lang=\"en\" class=\"no-js\">\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\r\n\t<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>\r\n\r\n\t<link rel=\"stylesheet\" href=\"css/reset.css\"> <!-- CSS reset -->\r\n\t<link rel=\"stylesheet\" href=\"css/style.css\"> <!-- Resource style -->\r\n\t<link rel=\"stylesheet\" href=\"css/demo.css\"> <!-- Demo style -->\r\n</head>\r\n<body>\r\n\t<div class=\"cd-tabs js-cd-tabs\">\r\n\t\t<nav>\r\n\t\t\t<ul class=\"cd-tabs__navigation js-cd-navigation\">\r\n\t\t\t\t<li><a data-content=\"inbox\" class=\"cd-selected\" href=\"#0\">Inbox</a></li>\r\n\t\t\t\t<li><a data-content=\"new\" href=\"#0\">New</a></li>\r\n\t\t\t\t<li><a data-content=\"gallery\" href=\"#0\">Gallery</a></li>\r\n\t\t\t\t<li><a data-content=\"store\" href=\"#0\">Store</a></li>\r\n\t\t\t\t<li><a data-content=\"settings\" href=\"#0\">Settings</a></li>\r\n\t\t\t\t<li><a data-content=\"trash\" href=\"#0\">Trash</a></li>\r\n\t\t\t</ul> <!-- cd-tabs__navigation -->\r\n\t\t</nav>\r\n\r\n\t\t<ul class=\"cd-tabs__content js-cd-content\">\r\n\t\t\t<li data-content=\"inbox\" class=\"cd-selected\">\r\n\t\t\t\t<p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>\r\n\r\n\t\t\t\t<p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li data-content=\"new\">\r\n\t\t\t\t<p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>\r\n\r\n\t\t\t\t<p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li data-content=\"gallery\">\r\n\t\t\t\t<p>Gallery Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque tenetur aut, cupiditate, libero eius rerum incidunt dolorem quo in officia.</p>\r\n\r\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ipsa vero, culpa doloremque voluptatum consectetur mollitia, atque expedita unde excepturi id, molestias maiores delectus quos molestiae. Ab iure provident adipisci eveniet quisquam ratione libero nam inventore error pariatur optio facilis assumenda sint atque cumque, omnis perspiciatis. Maxime minus quam voluptatum provident aliquam voluptatibus vel rerum. Soluta nulla tempora aspernatur maiores! Animi accusamus officiis neque exercitationem dolore ipsum maiores delectus asperiores reprehenderit pariatur placeat, quaerat sed illum optio qui enim odio temporibus, nulla nihil nemo quod dicta consectetur obcaecati vel. Perspiciatis animi corrupti quidem fugit deleniti, atque mollitia labore excepturi ut.</p>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li data-content=\"store\">\r\n\t\t\t\t<p>Store Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>\r\n\r\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, enim, pariatur. Ab assumenda, accusantium! Consequatur magni placeat quae eos dicta, cum expedita sunt facilis est impedit possimus dolorum sequi nostrum nobis sit praesentium molestias nulla laudantium fugit corporis nam ut saepe harum ipsam? Debitis accusantium, omnis repudiandae modi, distinctio illo voluptatibus aperiam odio veritatis, quam perferendis eaque ullam. Temporibus tempore ad voluptates explicabo ea sit deleniti ipsum quos dolores tempora odio, ab corporis molestiae, eaque optio, perferendis! Cumque libero quia modi! Totam magni rerum id iusto explicabo distinctio, magnam, labore sed nemo expedita velit quam, perspiciatis non temporibus sit minus voluptatum. Iste, cumque sunt suscipit facere iusto asperiores, ullam dolorum excepturi quidem ea quibusdam deserunt illo. Nesciunt voluptates repellat ipsam.</p>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li data-content=\"settings\">\r\n\t\t\t\t<p>Settings Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nam magni, ullam nihil a suscipit, ex blanditiis, adipisci tempore deserunt maiores. Nostrum officia, ratione enim eaque nihil quis ea, officiis iusto repellendus. Animi illo in hic, maxime deserunt unde atque a nesciunt? Non odio quidem deserunt animi quod impedit nam, voluptates eum, voluptate consequuntur sit vel, et exercitationem sint atque dolores libero dolorem accusamus ratione iste tenetur possimus excepturi. Accusamus vero, dignissimos beatae tempore mollitia officia voluptate quam animi vitae.</p>\r\n\r\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ipsam eum reprehenderit minima at sapiente ad ipsum animi doloremque blanditiis unde omnis, velit molestiae voluptas placeat qui provident ab facilis.</p>\r\n\t\t\t</li>\r\n\r\n\t\t\t<li data-content=\"trash\">\r\n\t\t\t\t<p>Trash Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque a iure nostrum animi praesentium, numquam quidem, nemo, voluptatem, aspernatur incidunt. Fugiat aspernatur excepturi fugit aut, dicta reprehenderit temporibus, nobis harum consequuntur quo sed, illum.</p>\r\n\r\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima doloremque optio tenetur, natus voluptatum error vel dolorem atque perspiciatis aliquam nemo id libero dicta est saepe laudantium provident tempore ipsa, accusamus similique laborum, consequatur quia, aut non maiores. Consectetur minus ipsum aliquam pariatur dolorem rerum laudantium minima perferendis in vero voluptatem suscipit cum labore nemo explicabo, itaque nobis debitis molestias officiis? Impedit corporis voluptates reiciendis deleniti, magnam, fuga eveniet! Velit ipsa quo labore molestias mollitia, quidem, alias nisi architecto dolor aliquid qui commodi tempore deleniti animi repellat delectus hic. Alias obcaecati fuga assumenda nihil aliquid sed vero, modi, voluptatem? Vitae voluptas aperiam nostrum quo harum numquam earum facilis sequi. Labore maxime laboriosam omnis delectus odit harum recusandae sint incidunt, totam iure commodi ducimus similique doloremque! Odio quaerat dolorum, alias nihil quam iure delectus repellendus modi cupiditate dolore atque quasi obcaecati quis magni excepturi vel, non nemo consequatur, mollitia rerum amet in. Nesciunt placeat magni, provident tempora possimus ut doloribus ullam!</p>\r\n\t\t\t</li>\r\n\t\t</ul> <!-- cd-tabs__content -->\r\n\t</div> <!-- cd-tabs -->\r\n<script src=\"js/main.js\"></script> <!-- Resource JavaScript -->\r\n</body>\r\n</html>\r\n\r\n/* -------------------------------- \r\n\r\nPrimary style\r\n\r\n-------------------------------- */\r\n*, *::after, *::before {\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n  font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n  font-size: 1.6rem;\r\n  font-family: \"PT Sans\", sans-serif;\r\n  color: #f8f7ee;\r\n  background-color: #29324e;\r\n}\r\n\r\na {\r\n  color: #f05451;\r\n  text-decoration: none;\r\n}\r\n\r\nimg, embed, object, video, svg {\r\n  max-width: 100%;\r\n}\r\n\r\ninput, textarea {\r\n  font-family: inherit;\r\n  font-size: 1.6rem;\r\n}\r\n\r\n/* -------------------------------- \r\n\r\nResponsive Tabbed Navigation - by CodyHouse.co\r\n\r\n-------------------------------- */\r\nheader {\r\n  position: relative;\r\n  height: 160px;\r\n  line-height: 180px;\r\n  text-align: center;\r\n}\r\n\r\nheader h1 {\r\n  font-size: 2rem;\r\n}\r\n\r\n@media only screen and (min-width: 768px) {\r\n  header {\r\n    height: 200px;\r\n    line-height: 225px;\r\n  }\r\n  header h1 {\r\n    font-size: 2.6rem;\r\n  }\r\n}\r\n\r\n.cd-tabs {\r\n  position: relative;\r\n  width: 90%;\r\n  max-width: 960px;\r\n  margin: 2em auto;\r\n}\r\n\r\n@supports (background: linear-gradient(to left, #000, #000)) or (background: -webkit-linear-gradient(to left, #000, #000)) {\r\n  /* if linear-gradient is supported */\r\n  .cd-tabs::after {\r\n    /* subtle gradient layer on top right of the tabbed navigation- to indicate it's possible to scroll */\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    height: 60px;\r\n    width: 50px;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    background: -webkit-gradient(linear, right top, left top, from(#f8f7ee), to(rgba(248, 247, 238, 0)));\r\n    background: linear-gradient(to left, #f8f7ee, rgba(248, 247, 238, 0));\r\n    visibility: visible;\r\n    opacity: 1;\r\n    -webkit-transition: opacity .3s 0s, visibility 0s 0s;\r\n    transition: opacity .3s 0s, visibility 0s 0s;\r\n  }\r\n  .cd-tabs.cd-tabs--scroll-ended::after {\r\n    /* class added in JavaScript - remove the gradient layer when it's no longer possible to scroll */\r\n    visibility: hidden;\r\n    opacity: 0;\r\n    -webkit-transition: opacity .3s 0s, visibility 0s .3s;\r\n    transition: opacity .3s 0s, visibility 0s .3s;\r\n  }\r\n}\r\n\r\n.cd-tabs nav {\r\n  overflow: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n  background: #f8f7ee;\r\n  -webkit-box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);\r\n          box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);\r\n}\r\n\r\n@media only screen and (min-width: 768px) {\r\n  .cd-tabs::after {\r\n    display: none;\r\n  }\r\n  .cd-tabs nav {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    height: 100%;\r\n    -webkit-box-shadow: inset -2px 0 3px rgba(203, 196, 130, 0.06);\r\n            box-shadow: inset -2px 0 3px rgba(203, 196, 130, 0.06);\r\n    z-index: 1;\r\n  }\r\n}\r\n\r\n@media only screen and (min-width: 960px) {\r\n  .cd-tabs nav {\r\n    position: relative;\r\n    float: none;\r\n    background: transparent;\r\n    -webkit-box-shadow: none;\r\n            box-shadow: none;\r\n  }\r\n}\r\n\r\n.cd-tabs__navigation {\r\n  width: 360px;\r\n}\r\n\r\n.cd-tabs__navigation:after {\r\n  /* clearfix */\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n.cd-tabs__navigation li {\r\n  float: left;\r\n}\r\n\r\n.cd-tabs__navigation a {\r\n  position: relative;\r\n  display: block;\r\n  height: 60px;\r\n  width: 60px;\r\n  text-align: center;\r\n  font-size: 1.2rem;\r\n  font-weight: 700;\r\n  color: #c3c2b9;\r\n  padding-top: 35px;\r\n}\r\n\r\n.cd-tabs__navigation a:hover {\r\n  color: #29324e;\r\n  background-color: rgba(233, 230, 202, 0.3);\r\n}\r\n\r\n.cd-tabs__navigation a.cd-selected {\r\n  background-color: #ffffff !important;\r\n  -webkit-box-shadow: inset 0 2px 0 #f05451;\r\n          box-shadow: inset 0 2px 0 #f05451;\r\n  color: #29324e;\r\n}\r\n\r\n.cd-tabs__navigation a::before {\r\n  /* icons */\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 15px;\r\n  left: 50%;\r\n  margin-left: -8px;\r\n  display: inline-block;\r\n  height: 16px;\r\n  width: 16px;\r\n  background-image: url(\"../img/cd-icons.svg\");\r\n  background-repeat: no-repeat;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='new']::before {\r\n  background-position: 0 0;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='gallery']::before {\r\n  background-position: -16px 0;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='store']::before {\r\n  background-position: -32px 0;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='settings']::before {\r\n  background-position: -48px 0;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='trash']::before {\r\n  background-position: -64px 0;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='inbox']::before {\r\n  background-position: -80px 0;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='new'].cd-selected::before {\r\n  background-position: 0 -16px;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='gallery'].cd-selected::before {\r\n  background-position: -16px -16px;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='store'].cd-selected::before {\r\n  background-position: -32px -16px;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='settings'].cd-selected::before {\r\n  background-position: -48px -16px;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='trash'].cd-selected::before {\r\n  background-position: -64px -16px;\r\n}\r\n\r\n.cd-tabs__navigation a[data-content='inbox'].cd-selected::before {\r\n  background-position: -80px -16px;\r\n}\r\n\r\n@media only screen and (min-width: 768px) {\r\n  .cd-tabs__navigation {\r\n    /* move the nav to the left on medium sized devices */\r\n    width: 80px;\r\n    float: left;\r\n  }\r\n  .cd-tabs__navigation a {\r\n    height: 80px;\r\n    width: 80px;\r\n    padding-top: 46px;\r\n  }\r\n  .cd-tabs__navigation a.cd-selected {\r\n    -webkit-box-shadow: inset 2px 0 0 #f05451;\r\n            box-shadow: inset 2px 0 0 #f05451;\r\n  }\r\n  .cd-tabs__navigation a::before {\r\n    top: 24px;\r\n  }\r\n}\r\n\r\n@media only screen and (min-width: 960px) {\r\n  .cd-tabs__navigation {\r\n    /* tabbed navigation on top on big devices */\r\n    width: auto;\r\n    background-color: #f8f7ee;\r\n    -webkit-box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);\r\n            box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);\r\n  }\r\n  .cd-tabs__navigation a {\r\n    height: 60px;\r\n    line-height: 60px;\r\n    width: auto;\r\n    text-align: left;\r\n    font-size: 1.4rem;\r\n    padding: 0 2.8em 0 4.6em;\r\n  }\r\n  .cd-tabs__navigation a.cd-selected {\r\n    -webkit-box-shadow: inset 0 2px 0 #f05451;\r\n            box-shadow: inset 0 2px 0 #f05451;\r\n  }\r\n  .cd-tabs__navigation a::before {\r\n    top: 50%;\r\n    margin-top: -8px;\r\n    margin-left: 0;\r\n    left: 40px;\r\n  }\r\n}\r\n\r\n.cd-tabs__content {\r\n  background: #ffffff;\r\n}\r\n\r\n.cd-tabs__content li {\r\n  display: none;\r\n  padding: 1.4em;\r\n}\r\n\r\n.cd-tabs__content li.cd-selected {\r\n  display: block;\r\n  -webkit-animation: cd-fade-in 0.5s;\r\n          animation: cd-fade-in 0.5s;\r\n}\r\n\r\n.cd-tabs__content li p {\r\n  font-size: 1.4rem;\r\n  line-height: 1.6;\r\n  color: #8493bf;\r\n  margin-bottom: 2em;\r\n}\r\n\r\n@media only screen and (min-width: 768px) {\r\n  .cd-tabs__content {\r\n    min-height: 480px;\r\n  }\r\n  .cd-tabs__content li {\r\n    padding: 2em 2em 2em 7em;\r\n  }\r\n}\r\n\r\n@media only screen and (min-width: 960px) {\r\n  .cd-tabs__content {\r\n    min-height: 0;\r\n  }\r\n  .cd-tabs__content li {\r\n    padding: 3em;\r\n  }\r\n  .cd-tabs__content li p {\r\n    font-size: 1.6rem;\r\n  }\r\n}\r\n\r\n@-webkit-keyframes cd-fade-in {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes cd-fade-in {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n"}}
{"actor":{"display_login":"Justinakpobi8"}}