Navbar

HTML
<div class="page"> <div class="dimmer"></div> <header class="navbar"> <div class="navbar-content"> <a href="" class="navbar-back-button hidden-sm-up"> <i class="fa fa-arrow-left" aria-hidden="true"></i> </a> <a href="/" class="logo"> <img src="" alt="Brand" class="logo-img"> </a> <nav class="menu"> <ul class="menu-navigation"> <li class="nav-item menu-item main-menu-item"> <a class="nav-link " href="">Our Story</a> <ul class="menu__dropdown-menu"> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">History</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Our DNA</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Sit Amet</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Lorem sit</span> </a> </li> </ul> </li> <li class="nav-item menu-item main-menu-item"> <a class="nav-link active" href="">Our Services</a> <ul class="menu__dropdown-menu"> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Design</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">New Build</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Requiem</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Orum</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">After Death</span> </a> </li> </ul> </li> <li class="nav-item menu-item main-menu-item"> <a class="nav-link " href="">Lorem</a> <ul class="menu__dropdown-menu"> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Sit ipsum</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">est irvenit</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Requiem dolor</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Foremis Liter</span> </a> </li> </ul> </li> <li class="nav-item menu-item main-menu-item"> <a class="nav-link " href="">Media</a> <ul class="menu__dropdown-menu"> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Tolip</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Press</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Events</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Tus politis</span> </a> </li> </ul> </li> <li class="nav-item menu-item main-menu-item"> <a class="nav-link " href="">The Addams Family</a> <ul class="menu__dropdown-menu"> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Lorem ipsum sit</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Sit amet dolor</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Aretis neval dolor</span> </a> </li> </ul> </li> <li class="nav-item menu-item main-menu-item"> <a class="nav-link " href="">Careers</a> <ul class="menu__dropdown-menu"> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Working for us</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Vacancies</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Career events</span> </a> </li> </ul> </li> <li class="nav-item menu-item main-menu-item"> <a class="nav-link " href="">Contact</a> <ul class="menu__dropdown-menu"> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">General inquiries</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Offices</span> </a> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Yards</span> </a> </li> <li class="ui-list-item menu-item"> </li> <li class="ui-list-item menu-item"> <a href=""> <span class="caption">Services</span> </a> </li> <li class="ui-list-item menu-item"> </li> </ul> </li> </ul> </nav> <div class="side-navigation-toggle hidden-lg-up"> <span class="hamburger"></span> </div> </div> </header> <main class="main"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est ratione minima accusamus consectetur, voluptate, velit iure rerum iste similique nemo illo nam provident? Voluptas delectus tenetur at, voluptates blanditiis inventore ex iure enim error sed, consequuntur, aspernatur rem perspiciatis aliquam amet. Repellendus, repellat vel at eaque maxime obcaecati enim, illo dolorem? Nostrum omnis quasi natus quaerat aspernatur hic maxime necessitatibus quo voluptatem veritatis, excepturi error, sit vero deleniti laborum alias expedita magnam esse dolore, sed rem impedit. Modi explicabo porro nisi quae, quod totam ullam repellendus veritatis deleniti deserunt. Repellendus id, ullam a maxime tempore odio molestias nesciunt quis ipsam nostrum, exercitationem distinctio cum quod. Corporis dolorem ducimus praesentium, aperiam, distinctio veritatis tenetur facere aspernatur, numquam velit sunt accusamus nisi minima repudiandae accusantium unde officia id ipsum ullam! Harum, excepturi. Dolorem suscipit doloremque eos maiores architecto vel, quos sequi minima non harum nobis vero, saepe tempora accusantium quasi quaerat veniam dolorum pariatur. Voluptate atque ea quod cumque ullam perspiciatis reprehenderit labore autem dignissimos minus, expedita, totam culpa itaque porro optio. Inventore nisi quos aperiam deserunt ad est iusto cum rem commodi beatae ipsum fugiat ipsam sit facere molestias eligendi deleniti magnam, aut natus, modi nam. Delectus facere sapiente explicabo quae, maxime consectetur atque, minus quo tempora eligendi. Commodi alias consectetur repellendus. Doloremque quam recusandae ab vero delectus dolor earum minima eius, iure natus molestiae odio a facilis veniam distinctio necessitatibus culpa aut sequi consectetur ut eveniet! Eius tempore facilis fugiat perspiciatis a facere ex delectus autem eaque porro earum numquam laudantium consectetur enim reprehenderit sunt quasi, doloribus cupiditate, blanditiis quae quisquam unde accusantium. Illo odio illum accusantium voluptatum corrupti placeat aperiam eaque nam aspernatur, incidunt perferendis vitae quaerat non aut repudiandae dolore deserunt. Quis, animi debitis beatae non nulla, placeat temporibus quae nesciunt a explicabo magni molestias quas modi. Quidem quasi odio, dolor voluptate impedit atque inventore. Libero suscipit ad error recusandae asperiores, explicabo incidunt sunt! Quidem illo dolor doloribus praesentium, incidunt, modi eius itaque ratione reprehenderit delectus deleniti, facilis ea dignissimos obcaecati perspiciatis tempora! Amet distinctio esse consequatur, at, quis impedit asperiores soluta reiciendis quas eveniet repellat ut dolores perspiciatis architecto velit! Quam quis amet ipsa voluptatibus eaque! Facilis sit id illo quisquam sint cupiditate qui eaque nulla, impedit et accusantium autem unde sapiente reiciendis incidunt consectetur, eos excepturi perspiciatis beatae veniam laboriosam. Ipsum vel quae omnis, accusamus in unde at. Voluptatem officiis, fugit optio quasi veniam dolor inventore nam ex iusto! Consequuntur cumque perspiciatis deleniti eos. Aut voluptate repellat autem, eveniet, neque ea dolore soluta nostrum aperiam, laboriosam deleniti provident ratione consequuntur eos placeat consequatur. Natus non ipsa optio sequi provident expedita ducimus libero ullam possimus similique dolorum, reprehenderit, nisi. Sunt quidem facere temporibus, adipisci repudiandae, perferendis nulla aut laboriosam nemo, aliquid beatae modi doloremque? Ipsam et quam, eius omnis voluptatibus magnam enim! Quas facilis est quos dolores sunt commodi? Quaerat iste similique eveniet iusto. Iusto natus corrupti ab. Iure quos neque obcaecati dignissimos natus, optio quibusdam temporibus. Ipsa nobis, quae architecto illum, saepe in praesentium reiciendis, ratione accusamus modi unde! Vero porro, qui sunt praesentium natus ea perspiciatis. Consequatur error velit eaque blanditiis, repellat provident vitae sit natus hic omnis odio ducimus eligendi, maiores eum quasi aut perferendis dolorum a earum accusamus dicta adipisci molestias pariatur. A accusamus, et magnam doloribus incidunt nesciunt rem dolorem quisquam tempora labore vitae quam excepturi nam cupiditate aliquid. Eius, repellat dolorum voluptates, animi a officiis unde explicabo aperiam pariatur quidem ipsa voluptate, asperiores, nihil esse laborum maxime sequi quasi illo. Molestiae consequuntur nihil placeat, ullam debitis quaerat, veritatis optio recusandae suscipit cumque, voluptatum iure quia. Esse, porro voluptas quis laudantium autem in incidunt iste tempore nostrum. Nesciunt molestias possimus quae necessitatibus ipsam, blanditiis deserunt, totam modi accusantium pariatur voluptatum earum cumque sapiente atque magni, nam dolor quod, nulla dignissimos culpa quas? Quae omnis totam saepe corporis accusamus laboriosam iste dolore libero harum deserunt adipisci ab animi quas reiciendis doloremque error esse tempore numquam, eveniet! Rerum deleniti inventore, totam placeat architecto itaque earum ipsa. Id maxime, consectetur, velit perferendis animi veniam cum provident quidem dicta dolor veritatis. Tempora suscipit odio ratione, quod asperiores labore neque quaerat animi aut consequatur corporis doloribus ipsum ea soluta quas nostrum provident amet libero rem tempore porro sed! Vero quos fugiat aliquam, rem quo quae blanditiis sint perferendis eligendi pariatur inventore molestias deserunt et, nesciunt itaque sapiente, explicabo temporibus odit. Sunt iste, reiciendis nostrum? Ipsa, aliquid! Quod culpa, accusantium, neque architecto libero consectetur beatae. Ab delectus maxime perferendis necessitatibus, molestiae unde minima recusandae voluptatibus adipisci consectetur voluptate dignissimos, quae hic! Officiis, nulla iste magni officia atque explicabo eveniet dolor modi dignissimos beatae. Eligendi, eveniet rem earum in molestiae fugiat nisi rerum excepturi, iure possimus perspiciatis modi velit corporis blanditiis, dolorum maiores voluptates nobis quasi expedita. Est magnam quis modi assumenda voluptatum, voluptatibus labore minus, neque vel sapiente quas, nam mollitia, saepe consequatur. Architecto quia ut deserunt ipsam dolorum perferendis minima, odit, ullam assumenda facere reprehenderit, rem. Voluptatem nostrum blanditiis numquam, ipsam officia, est ipsum modi, tempore eveniet quibusdam excepturi, possimus! Asperiores eius aperiam cupiditate qui. Aut provident quas voluptatem quisquam quaerat qui quidem sequi, magni, inventore soluta sed voluptate! Provident, eos nulla ullam ab ipsam est quaerat dolores nesciunt nemo consequatur hic minima. Incidunt dolores reiciendis quos maiores adipisci modi itaque architecto debitis ipsa perspiciatis provident nobis molestiae excepturi aspernatur vero consequuntur qui, magnam nostrum totam perferendis neque. Natus fugiat, excepturi tenetur nobis aliquam nemo laboriosam est cum ratione culpa dolore, id ducimus ipsa distinctio commodi unde saepe aperiam nihil. Tenetur perspiciatis, minima quia explicabo error tempore tempora at nostrum repudiandae debitis, delectus perferendis incidunt, deleniti fugiat optio necessitatibus! At explicabo, repellat aliquam accusantium consequatur magnam delectus id nostrum. Vel quo voluptatem, aspernatur quas harum asperiores nemo ex odio, delectus natus velit ipsum fuga consequuntur voluptatum blanditiis sunt perspiciatis recusandae in, totam a! Ratione quibusdam, obcaecati hic debitis laborum voluptatibus! Sequi fuga labore, alias ea tempora unde quaerat necessitatibus vitae magni maxime facere odit deleniti assumenda, consequuntur quis sunt facilis repellendus officiis veniam incidunt in voluptatem corrupti expedita quos dolor! Architecto similique soluta, voluptates cupiditate, sapiente incidunt sit. Incidunt aliquam molestiae, iusto, eos doloribus nemo voluptas voluptate culpa quibusdam id debitis illum ipsam est earum quo eveniet tempora necessitatibus, molestias sapiente recusandae velit. Aut architecto impedit dolor vitae, consequatur minima deserunt maxime, temporibus voluptate. Non sapiente voluptas, modi, atque in numquam ad quaerat omnis mollitia corporis ea odit nihil. Nostrum, ipsa id quam harum dolorum assumenda accusamus laborum, amet vero exercitationem et placeat saepe, alias perspiciatis ut facere reprehenderit officia perferendis incidunt quas sint beatae eaque maxime nam. Tenetur nesciunt aspernatur, ad expedita, accusantium totam maxime, consectetur dolorem fuga consequuntur eveniet, praesentium veritatis. Accusantium molestias nostrum, itaque ducimus veniam voluptatem dolor maiores illo modi doloremque. Necessitatibus voluptate error ipsa, quod eaque, unde id? Voluptatibus facere facilis, eos corrupti esse molestiae cum perferendis perspiciatis et delectus nostrum, voluptate amet omnis inventore? Perferendis, qui! Aperiam, tempore corporis alias illo vitae voluptatibus esse itaque cumque impedit placeat distinctio voluptas iusto ab laudantium molestias repellendus, explicabo perspiciatis odio ullam ratione et commodi quia! Accusantium deleniti ab nostrum aperiam recusandae id, ut hic maiores nam, tempore minus repellendus, dicta iste fuga harum laboriosam facilis. Accusantium quidem numquam quam unde, repellat nemo, quas perspiciatis. Perferendis molestias dolorum, illo incidunt quidem ducimus dolores, iusto odit, beatae illum sint sit itaque animi delectus recusandae perspiciatis velit obcaecati. Modi, iste laboriosam cum placeat ducimus est qui quibusdam dolorem dolor quaerat, aliquid veritatis. Rerum placeat fuga aliquid vitae maiores porro repudiandae quidem officia, voluptas aut doloribus neque rem et accusamus soluta ratione consequuntur a harum! Explicabo tempore placeat, enim! Dolores consequatur at autem molestiae, incidunt iusto, repellendus deleniti et architecto a nemo excepturi, minima sequi! Laborum qui vero incidunt, consectetur asperiores labore sequi recusandae ea sit inventore placeat eius dolor ipsa officia officiis nostrum reiciendis impedit voluptatem et quidem. Libero eveniet porro maiores nesciunt officiis labore obcaecati beatae. Minus nemo voluptatum at voluptates dolores, maiores blanditiis optio asperiores! Necessitatibus commodi pariatur ad alias vero consectetur repudiandae, laboriosam architecto numquam nulla neque veniam illum culpa quae quam quasi quos in aliquid. Distinctio adipisci quisquam atque necessitatibus quia maxime dolores obcaecati, eius quos accusamus dolorem corrupti tempore commodi corporis recusandae nulla ratione minus, laborum a aperiam facilis! Explicabo minima nobis pariatur nulla consectetur veritatis unde deleniti perspiciatis, praesentium laboriosam nostrum, ad itaque cupiditate, aliquam quisquam commodi laudantium. Accusamus aut perspiciatis, repellat vitae eos sequi ullam cumque dicta, eveniet neque natus dolorem ab. Esse illum officia quod repellendus laboriosam eos, ratione facilis obcaecati iusto animi debitis non veniam nobis, at quae soluta excepturi. Pariatur, atque repellat praesentium et voluptatibus architecto provident blanditiis quibusdam, iusto incidunt ex maiores adipisci corporis aliquid. Hic recusandae vero cum est natus illum optio ex asperiores labore provident quisquam, nam tempora repudiandae. Cum, tempore labore unde ratione hic culpa voluptates ducimus eos doloribus amet, vero eligendi sit, laboriosam nulla rem a necessitatibus impedit? Laborum fuga nulla labore, repudiandae dignissimos sint. Alias maxime, ipsam. Distinctio facere in temporibus eius velit delectus beatae maxime perferendis, dignissimos, aliquid illo ipsa enim quidem ab minus voluptate itaque accusantium aut consectetur nihil assumenda autem voluptatum mollitia? Ad eaque error repellendus. Dolorem eos nemo labore, quasi ex autem voluptatem debitis fuga cumque, odit laboriosam vero, dolores, reprehenderit nesciunt ipsum quae. Atque laboriosam quos est veritatis molestiae sunt voluptas animi, officiis optio nemo officia nisi, quibusdam delectus maxime autem nam perspiciatis reiciendis sit ratione, quidem voluptates. Dicta illum saepe quidem, quae commodi, nam quas tempore ea officiis officia dolorum voluptate inventore culpa repellendus, optio expedita repellat, architecto numquam voluptates ipsam. Tempore quas, voluptate, facilis eum maxime saepe molestiae reprehenderit laboriosam illo adipisci quod unde tempora id aspernatur sed culpa quasi sit aliquam rem praesentium officia. Quia ipsa blanditiis esse voluptatum rerum, illum reiciendis ex consectetur natus, consequuntur cumque, nostrum veniam. Deleniti unde, voluptate asperiores at aliquam consequuntur veritatis, dolorum ad accusamus vitae mollitia, id eos dolor nam ex hic recusandae enim cum error incidunt excepturi odio est. Tempore nostrum quibusdam nesciunt dignissimos inventore aspernatur ratione perspiciatis repudiandae aliquam, error, velit nulla libero, impedit esse ipsam aliquid, quidem beatae! Similique eum rem, incidunt corporis, voluptates debitis culpa facilis sint odit id necessitatibus nam perferendis dicta alias repudiandae officia temporibus dolores aspernatur aperiam animi. Tempore cum, qui odio nemo necessitatibus atque minus porro et earum repellat odit voluptatum commodi reiciendis, repellendus vitae hic unde quo quam incidunt aut corporis excepturi nulla eaque. Consequuntur voluptatum nihil dolore repellendus, facere at in quas laudantium explicabo itaque sint vitae laboriosam, sequi voluptates tempora vero ipsum est. At fugit, libero exercitationem. Quaerat qui modi esse nisi maxime nesciunt suscipit nemo, voluptatem est necessitatibus dicta totam commodi aliquam eveniet quasi ipsam consequuntur, sit minus! Perferendis, sequi. Sequi, voluptate, quisquam. Eligendi consequuntur, omnis inventore, eos iusto accusantium facere veniam quidem reiciendis dolorum adipisci, qui vel, repellendus aperiam! Ratione magnam totam illum sit doloremque incidunt debitis, nulla deleniti molestias eos voluptatum accusamus est in quasi earum? Blanditiis alias dolorem, iusto itaque odit omnis eveniet, debitis, voluptatum id cumque saepe, rerum eos nisi! Eligendi voluptatum, voluptate provident beatae architecto quae cumque, sunt labore et, totam ab aperiam distinctio. Nemo vero explicabo quos cupiditate fuga temporibus, culpa dicta error soluta laudantium aperiam suscipit odio adipisci sequi sint fugiat veniam quo eaque consequuntur sunt nihil facere. Culpa provident facere perspiciatis qui vitae doloremque tempore. Quaerat rem necessitatibus ducimus, excepturi omnis nesciunt repellendus enim culpa aut ullam fugit expedita quibusdam animi, reprehenderit laboriosam. Quia, distinctio odio? Vero nulla quam eveniet dolorum neque alias repellendus nemo ex impedit excepturi cum minus, asperiores autem, officia labore, officiis iure distinctio rerum. Sint, nemo, totam hic dicta sunt asperiores aspernatur et nisi, inventore a, quo. Odit quasi, nisi quibusdam asperiores rem inventore neque magnam excepturi, porro magni placeat maxime est beatae cupiditate quas maiores numquam aut! Eveniet est itaque eos in hic neque nesciunt maxime, reprehenderit error dolores qui earum quos nostrum optio obcaecati libero natus vero, quam assumenda perferendis. Voluptas sunt, voluptates maxime distinctio autem fugiat odio minima. Enim, vel? Minima nam enim, natus, iure modi ullam distinctio consectetur inventore sapiente quae dolorum autem, eos minus voluptatum, commodi debitis! Voluptatibus iste exercitationem asperiores dolores quibusdam, porro quisquam, minus optio. Voluptatem iure quo velit qui sed dolores rerum minima, voluptates at ipsa eius quidem voluptate iusto sequi atque beatae obcaecati dignissimos assumenda quas, necessitatibus nihil delectus inventore vitae. Culpa suscipit explicabo, veniam quia! Aut facere, asperiores. Quo, ipsum optio deserunt alias quisquam nemo iure. Fugit dolore vero, quaerat consectetur sunt illo, voluptate neque sequi sed voluptatum deleniti accusantium, aut velit at cum rem expedita voluptatem eaque earum quae magni commodi tenetur debitis aliquam! Illo placeat sequi in exercitationem, dolores fuga libero molestias excepturi, tempora cumque. Quos blanditiis at earum laudantium vero, provident repudiandae dolorem tempore quisquam, eos mollitia deleniti harum nesciunt similique ipsum doloremque minus a repellendus obcaecati numquam reprehenderit quidem deserunt! Quod culpa, non maxime suscipit maiores cum dolorum magni placeat adipisci laudantium, deserunt ea molestias nam iste voluptatibus velit doloremque natus eaque totam minus, quasi ab atque omnis quis. Natus in dolor ab unde deserunt quasi iure maiores hic quas at, iusto veritatis ea dolorem, inventore tempore nobis. Architecto quibusdam, vitae ab! Ut odio id libero ipsam eligendi quo dolore doloremque corrupti quos ratione, pariatur, quis mollitia fuga tempora ad rem earum odit voluptatem facere labore dignissimos minus accusantium qui culpa. Provident dolore ipsam sapiente eum deleniti fuga. Hic quae ipsam totam ipsa in, esse illum, pariatur minus dolor ex velit repellat quas id molestiae, tempore. Voluptates amet iure nulla hic, dolorem quos dolores officiis autem necessitatibus, maiores similique! Doloribus dolor beatae ratione quae culpa aut nostrum fuga quos facere iure, corporis aspernatur eum molestias voluptates ab asperiores blanditiis amet praesentium quaerat fugiat deserunt nemo eligendi repellat impedit deleniti. Impedit enim ducimus autem dignissimos quisquam quo suscipit distinctio, est asperiores, harum placeat doloremque numquam, soluta provident animi veritatis temporibus minus aliquam dolore molestias unde quis. Earum totam alias fugit error ratione nemo. Eligendi tenetur ullam fugiat fugit sunt repellendus facere modi iusto corporis voluptatem. Excepturi, ducimus perferendis quo maxime, nesciunt iste temporibus voluptate velit officia nulla, in error voluptatibus rem deserunt itaque sed tenetur aliquid eius! Ab, aspernatur illum ipsa necessitatibus, dolorem rem hic omnis aperiam repudiandae minima culpa reiciendis nisi sint! Nihil molestias, est eligendi ipsa atque eos nam, doloribus repellat velit placeat asperiores ab, enim excepturi natus veniam et quae, eum quidem dolor. Numquam debitis iure illum, accusantium ad dolores error voluptate dolorum nisi harum saepe quia animi recusandae doloremque illo, unde quo iste neque. Laboriosam tempore, debitis cumque quae asperiores quod consequuntur veritatis nihil ratione incidunt reiciendis cum. Architecto delectus inventore, excepturi facilis laboriosam soluta dolorem. Culpa, nihil, sapiente. Sapiente ab ipsam, officia autem, quaerat distinctio quod architecto rerum voluptates odio aperiam facilis mollitia cumque? A deleniti quasi harum, quos, eum est placeat rerum laborum dolore ex optio quisquam, veniam quod nisi deserunt! Nam asperiores molestiae, consequuntur facilis nulla excepturi, rerum earum voluptatibus iste natus, similique neque dicta suscipit quibusdam! Totam blanditiis officia deleniti nostrum, minima cumque quod aliquam quibusdam rerum qui soluta tenetur quia beatae. Quae, totam labore soluta! Deleniti sint sit eos facere tempore earum nostrum neque ducimus pariatur iste iure, ut sunt repellat enim tenetur illo quos aperiam magni, libero vero corporis, debitis odit, laborum animi. Animi, sapiente libero dolores repellendus, repudiandae veritatis dolore culpa porro quasi. Similique, adipisci, quaerat rem neque architecto modi reiciendis repudiandae soluta, provident animi ad impedit praesentium rerum, mollitia sunt odio quibusdam labore. Ex a doloribus voluptates et cupiditate nobis non qui sit dolor ad reiciendis eveniet rerum, fuga quis, nostrum nam minus! Rem modi voluptatum praesentium explicabo fugiat tenetur iure, ad, nihil ducimus delectus culpa natus suscipit doloremque impedit error ipsa voluptates minus adipisci deleniti dolores corrupti soluta animi. Repudiandae repellendus dolores amet sed nulla iure doloribus deserunt vel sunt quas praesentium natus culpa facilis rem veritatis asperiores minus, soluta, voluptatibus quo hic quam quod voluptatum. Dolorum doloremque eaque amet esse pariatur mollitia eligendi ex ratione deserunt obcaecati cum nesciunt animi nihil quis sapiente illo, atque similique repudiandae dicta? Corrupti eos aliquid harum ab ullam. Magnam velit, dolores et, officia facilis porro enim voluptate voluptates nam ducimus inventore ipsum commodi excepturi! Necessitatibus, ab dolore magnam repellat fuga, nostrum aspernatur consequuntur rem at? Perferendis inventore excepturi, numquam maxime repudiandae consequuntur? Ipsam tenetur amet illum quis eos minus obcaecati quod repellendus quo hic cum reprehenderit ab repellat, odit sed id, repudiandae incidunt fugit quos debitis fugiat quia quaerat odio. Ipsa accusantium quos necessitatibus odio laboriosam, amet quasi iusto nobis, fuga perspiciatis deserunt aliquid, illo odit, at nam labore. Quasi non at necessitatibus nemo sunt, nostrum aperiam exercitationem, aspernatur error deleniti, quod beatae nam rerum! Dolore, nemo unde, iure deleniti, quas omnis explicabo velit sint culpa corporis adipisci dignissimos reprehenderit repellendus optio expedita aliquam reiciendis laborum totam tenetur provident alias minima! Quo laboriosam ad sit cum laborum blanditiis, quas labore ullam, suscipit temporibus dolorum reprehenderit perspiciatis exercitationem. Quasi asperiores debitis fugit at, aperiam veniam odio animi culpa placeat labore minus rem! Eaque culpa illum, explicabo, dolorem in delectus deserunt neque tempore vel, consectetur sit quam magni quis cupiditate minima dicta deleniti possimus blanditiis! Commodi totam, tempora iste molestias unde, eius ratione, repudiandae aperiam dicta facilis aut! Dignissimos facilis dolorum est accusamus nam odit ipsum deserunt corporis tempore tempora dolor rem labore qui dolorem culpa quasi eius officia, vel, numquam commodi soluta veritatis obcaecati, adipisci quos! Ab aspernatur consequatur, rem quaerat non eaque laboriosam, ratione iste sed. Expedita ullam, soluta eaque, animi tempore quibusdam nesciunt non quos voluptatibus ratione dolor atque explicabo aut, repellendus mollitia, nulla corporis cum saepe reprehenderit. Quo odio reiciendis alias provident aliquam quis sequi explicabo, optio reprehenderit quidem autem at cumque vel, harum dignissimos blanditiis. Voluptate numquam eos eligendi vitae exercitationem, totam facere aspernatur dignissimos error reprehenderit consectetur eum, ut delectus quam harum dolorum, architecto culpa recusandae. Eius porro facilis corporis, possimus laborum id! Ipsam sit atque ex natus obcaecati modi error debitis culpa ullam vel quod iure sint, aspernatur itaque quam ea, nisi adipisci molestiae, officiis iste temporibus vitae enim. Mollitia ullam molestias quasi, provident unde laboriosam earum blanditiis totam sunt nisi qui. Ullam libero impedit minima laborum in debitis fuga, officiis. Quae molestias exercitationem asperiores harum animi omnis iure, minima tempore, similique, dolore modi. Dolore quasi tenetur deleniti iste sit, asperiores iure autem sequi, laborum cumque est nisi soluta, ratione obcaecati reprehenderit consectetur in accusantium! Dolor, ad ab. Facere minima aut quam explicabo fuga rerum, consectetur repellendus impedit nesciunt exercitationem adipisci commodi delectus perspiciatis quae, libero alias accusamus odit culpa laudantium repudiandae voluptatem eveniet mollitia eos optio. Iure deserunt reprehenderit molestias tenetur fuga reiciendis veritatis ut, accusamus sint laudantium? Voluptatibus inventore neque voluptatum nemo, hic, tenetur consequatur dignissimos voluptas ex ipsum deleniti fugit obcaecati impedit, rem cumque perferendis veritatis velit asperiores architecto. Repudiandae quae excepturi architecto, est mollitia labore ab inventore, odio eius tenetur vero error tempore aut, consequuntur eveniet maiores. At, magnam, ducimus tenetur eaque harum aperiam incidunt repellendus, expedita doloribus consectetur quas. Accusamus odio placeat, ea non, error inventore? Ipsam velit, nostrum neque illo! Officia maiores porro, culpa labore provident mollitia voluptatem laborum laboriosam eaque, commodi facilis facere! Dolores magnam ad, corrupti suscipit iste, expedita molestias id ipsa sapiente delectus veritatis vero dignissimos praesentium ab dolore quisquam, recusandae labore tenetur laborum nihil harum nisi reiciendis est. Eaque, consequuntur explicabo saepe alias dolore modi veritatis iure dolorem, neque necessitatibus quos similique animi libero placeat temporibus fuga, suscipit maxime rem vero. Illo magnam aliquam qui ad, nobis commodi quidem necessitatibus beatae laborum doloremque reiciendis voluptas quasi rem sint, modi quae corporis laboriosam minus. Ipsum, sint? Porro, doloribus laudantium inventore necessitatibus illo recusandae sed rerum repudiandae officia explicabo voluptates quod a maiores, provident aut dicta nemo veritatis harum dolorem sunt. Enim minima aut, est fugit quia amet laudantium reiciendis doloremque a eligendi id ullam, corporis fuga recusandae ipsum, non eos iusto. Blanditiis possimus architecto ea porro, dicta nemo suscipit deleniti eveniet dolor perspiciatis voluptates facilis incidunt obcaecati animi aperiam, minima voluptatum. Inventore, incidunt optio, beatae delectus, maxime autem voluptas dignissimos labore dolore assumenda excepturi, natus quos. Adipisci nam voluptatibus debitis sit recusandae nulla, qui beatae voluptate praesentium, porro, quas? Excepturi animi, dicta ea ipsa perferendis corrupti debitis! Odit reiciendis nisi alias, magnam recusandae libero enim expedita deleniti iusto corporis quod eos, non! Fuga ex cumque quos iste omnis doloribus minima quia veritatis quidem, dolore laudantium odit quis nulla magni veniam doloremque id, ad, praesentium suscipit. Modi possimus mollitia commodi exercitationem veniam sunt, amet culpa similique, adipisci aperiam nulla maxime deserunt dolores, quidem tenetur placeat vel voluptate velit cum porro. Saepe architecto reprehenderit atque nulla, velit molestiae sequi itaque. Est necessitatibus, minima doloremque, corporis laboriosam sint quidem architecto sequi esse, autem aliquam ullam quia facilis recusandae. Maxime rem cumque at adipisci eligendi dicta perspiciatis provident dolorem nemo quam voluptates, eveniet facere laborum, tempora voluptas nulla beatae itaque dolore reiciendis, reprehenderit nam! Dolor repellendus, nihil veritatis quaerat natus harum. Est non doloribus magni ullam obcaecati consequatur tempora incidunt assumenda veritatis officiis mollitia, sapiente architecto accusamus ducimus facilis aspernatur dolorem repellat illum provident placeat iure corporis dignissimos distinctio. Ullam dicta, placeat vero nemo aperiam neque voluptas esse veritatis dolorum dolorem quos, officiis repudiandae aspernatur delectus consequuntur maxime! Esse unde tempora quidem ex dolorum culpa in labore assumenda, dicta quo voluptatibus, eius enim ratione nihil, deserunt blanditiis. Quas, omnis doloribus doloremque vel maiores accusantium eligendi quam qui, atque nisi possimus porro alias, quaerat quos magnam impedit laboriosam facere officiis, modi quae. Voluptatibus aliquid suscipit nihil minus nemo! Cupiditate ratione dolore expedita, eligendi ad minima vero tempore eaque illo ipsum officia optio laudantium, porro hic nulla velit non sapiente quas iure voluptatibus temporibus, delectus accusamus veniam esse itaque! Repellendus similique tempore quibusdam earum veritatis itaque, dolor officiis impedit est cumque delectus quos nostrum molestias molestiae soluta eaque, ipsam, adipisci corporis quam modi illum. Eos libero eaque fuga, exercitationem deserunt! Facilis ratione ipsa veniam cumque recusandae consectetur at. Beatae delectus consectetur aliquid, vel nemo a adipisci recusandae rem, magnam cupiditate autem commodi eligendi amet sapiente quos et excepturi minus quidem! Asperiores quisquam quidem culpa, cumque, inventore fugit error id. Expedita, corrupti numquam. Laborum facere placeat veniam, nostrum praesentium tempore iure quisquam obcaecati ipsam mollitia temporibus itaque quam beatae ducimus totam necessitatibus minima porro saepe! In ut quisquam fugiat quo sit necessitatibus maiores non corporis. Ipsa tenetur quibusdam totam! Iusto dolorum, aliquid non suscipit ipsa odio numquam placeat adipisci nostrum inventore minus. Fugit officiis pariatur perspiciatis voluptatibus, placeat eligendi minima, porro rem ratione dolor, quis fuga esse eaque omnis nisi animi molestiae dignissimos quae deleniti quam consectetur! Possimus alias, ullam, perspiciatis molestiae corrupti iure dicta, esse commodi quod soluta ipsam dolore quasi dolor corporis, explicabo obcaecati placeat ratione! Soluta voluptas ex amet consequuntur quaerat, possimus nulla eos eaque perferendis illo ea cumque odit accusamus nisi, nemo. Optio assumenda nulla voluptatum ipsa veritatis magnam possimus maxime iusto id quam repudiandae harum, eius molestiae ipsam aut, quaerat recusandae nostrum at error dicta quibusdam. Ut quod cupiditate tempora sunt expedita asperiores, est ratione sed quas a, doloremque quia delectus blanditiis iste vero. Unde enim, voluptatem quam autem! Magnam earum vero distinctio obcaecati nihil, voluptatum at iure dolorum doloribus consequatur dolorem, deleniti, iusto fugit explicabo cupiditate vel nam aspernatur harum hic cumque reprehenderit necessitatibus. Alias ad dolorum velit amet ipsum sit eos illum id expedita iusto, quas quae ducimus, adipisci exercitationem laboriosam. Illum provident sequi assumenda repudiandae, similique laborum, fugit saepe, doloribus temporibus blanditiis iste perspiciatis et pariatur obcaecati! Libero ab deserunt facere quos dolor neque ipsa tempore sequi iste doloremque modi illo maiores laborum accusantium perspiciatis delectus, labore facilis nam sapiente voluptatibus. Minima ex commodi possimus architecto similique, nesciunt, expedita vitae veritatis, velit, necessitatibus molestias quaerat quidem qui totam. Eveniet distinctio commodi maiores fugit, magni nihil, laborum veritatis perferendis dolorum ipsum pariatur fuga quis beatae totam autem explicabo reiciendis, natus rerum asperiores debitis quas ratione mollitia perspiciatis impedit ipsam. Recusandae possimus sunt voluptates maxime ullam porro provident molestiae, laborum eum est, minus, vero nostrum itaque. Facilis explicabo, eveniet quidem rem animi tempora nihil ad, repudiandae, quos debitis quas, nisi nulla temporibus atque consequuntur ab ex. Enim, voluptate. Deleniti quas iure ducimus sit, eum amet et dolor, enim laudantium modi optio. Quas facilis sed omnis, sint odio consequuntur iste similique quis. Nesciunt temporibus, illo asperiores. Non neque ad rerum ut perferendis sit quidem, consequatur delectus at placeat dolor aspernatur, enim rem assumenda repudiandae quibusdam error omnis ab maxime unde et itaque pariatur autem. Id placeat repudiandae quaerat inventore molestiae vitae, rem facilis earum iusto quas, neque quos labore sint temporibus rerum ipsam nesciunt voluptates sequi dolorum dignissimos. Eius labore dolores corrupti soluta, explicabo rem veritatis eum aperiam. Aliquid est sunt minus magnam hic nisi perspiciatis quae voluptate eum deleniti deserunt porro quaerat cupiditate consectetur dolorum officiis, dolore nihil autem ex, ipsam! Perferendis voluptatum voluptates modi architecto, doloremque sapiente veritatis. Ipsa fugiat vitae maiores, quaerat, voluptatum dolores enim id, consectetur repudiandae inventore dicta error modi deleniti sunt beatae reprehenderit pariatur iure nihil. Ratione dolore nisi, iure incidunt. Voluptatem, beatae. Porro quae sunt enim iusto optio. Reiciendis eos facilis odio quaerat optio impedit, delectus maiores dolores itaque accusamus ut, quae totam quo minima cupiditate architecto a excepturi dicta qui ratione id quisquam. Libero modi esse asperiores quasi nemo, praesentium culpa beatae, accusamus quae soluta alias! Rem pariatur doloremque dignissimos eum repellendus nulla corporis, repellat ab, ullam recusandae sit quisquam quasi, quibusdam. Ullam maxime voluptates, suscipit laborum nobis praesentium cum aliquam, ad consequatur ab, cumque tempora maiores ex doloribus! Labore assumenda molestiae voluptates minus obcaecati temporibus repellendus, alias fuga eveniet! Ullam velit saepe voluptatibus, praesentium quos similique expedita iste alias sunt id ut enim excepturi, voluptate consequatur deserunt inventore, optio, autem molestias laudantium. Odit et sunt omnis facere ullam, veniam velit soluta. Reiciendis doloremque cupiditate optio, dolores quibusdam voluptate eveniet eos tempore minima porro rerum assumenda, nulla ut delectus corrupti libero suscipit veritatis ratione at vel aperiam magnam sunt. Unde corporis accusamus veritatis ad mollitia vitae blanditiis rerum ex natus sit dolores libero dolore minus, sunt saepe numquam dolorem alias totam velit corrupti pariatur sed! Ipsam recusandae voluptatem culpa, nemo harum hic velit dicta. Placeat, fugit soluta reprehenderit? Pariatur labore, soluta sapiente eos et? Similique consequatur tenetur quis nisi numquam fuga, voluptas laudantium dolorum unde laborum saepe maiores iusto omnis asperiores delectus, possimus magnam perspiciatis distinctio nostrum ea incidunt minus ipsum molestiae voluptatibus. Omnis dolores quisquam blanditiis, soluta nesciunt et debitis at, culpa aspernatur sint, eum hic! Mollitia eligendi magni sint expedita culpa voluptate possimus, excepturi aut explicabo velit rerum maxime dignissimos voluptates reprehenderit sequi aperiam a officia nam illum aspernatur, quos recusandae quas. Ut odit asperiores soluta consequuntur, numquam rem provident ad vel ea eaque itaque ipsam quibusdam, quas excepturi repellat sint velit necessitatibus, error officia. Velit labore deserunt nulla praesentium voluptatibus at exercitationem, nihil laudantium eum cum? Adipisci minus a facilis debitis temporibus eaque error, eius ullam cum magni blanditiis, ducimus. Nobis, inventore iure deserunt porro eum eveniet incidunt sint, voluptatem accusantium blanditiis adipisci suscipit ad ipsum accusamus ullam nisi deleniti consequatur debitis minima veniam! Cumque eaque doloremque alias ipsa maiores ullam ipsum voluptate minus architecto, possimus voluptas incidunt. Architecto harum atque fugit rerum modi labore, culpa adipisci facilis veniam, quos tenetur numquam unde inventore enim at aliquid impedit dignissimos pariatur error quasi deleniti nobis? Vel id consequatur amet veniam sed accusantium voluptate vero veritatis ab quis eum pariatur, autem maiores cum accusamus aperiam omnis, excepturi dolores earum officiis. Quas soluta fuga ipsa, illum ipsum voluptas porro nobis eveniet nam ut quia cumque, unde accusamus vel totam! Deserunt voluptates reiciendis eligendi, nemo hic delectus accusantium, incidunt quae, aperiam nesciunt voluptatum! Maxime, ex, fugit eum cupiditate hic mollitia nesciunt illo! Veniam, dolorem velit commodi ut ullam corporis explicabo autem dolores beatae, iste illo, provident neque atque error possimus accusantium temporibus, odio tempora nostrum distinctio deserunt quaerat aliquid! Harum quasi consectetur enim quidem incidunt possimus hic ipsa repudiandae, laborum animi molestias dolore eveniet nam, adipisci architecto porro dicta rem, fugiat aliquam error dolor, fuga voluptatem impedit eos. Pariatur ut sint minus. Autem quod suscipit distinctio sed atque, nihil saepe. Veniam expedita incidunt quos, eum eius eos saepe beatae nobis cumque. Natus non dolorem, iste reprehenderit eius quisquam, sequi unde, pariatur sint ipsam voluptates perspiciatis consequatur eveniet. Eligendi asperiores, soluta expedita ducimus laudantium quo pariatur. Harum architecto, eos facilis! Ad ipsam, cumque placeat. Nemo, unde officia in nulla ducimus, delectus error voluptatibus iste ipsum quasi amet nihil perferendis, non quaerat repellat debitis eveniet alias esse. Labore velit ipsa officiis aliquam, at voluptatum voluptatem deserunt dolor possimus facilis! Aspernatur fugit non aperiam tempore voluptatum, ducimus! In nesciunt odio adipisci molestiae ex debitis et libero quaerat recusandae nisi vero quos perferendis tempore fugit corporis, ipsa harum sapiente blanditiis magnam veritatis natus odit, ipsam. Hic laboriosam unde iure voluptate. Et harum ex porro, ea autem sint aliquam, placeat dicta eligendi, praesentium iste reiciendis, veniam similique consequuntur? Vel beatae maiores dolorem tempora voluptatem architecto, delectus magnam labore rerum aperiam est quae blanditiis ipsam corporis explicabo quia, sint, culpa exercitationem sequi optio recusandae deleniti, aut facilis vitae. Consequatur mollitia recusandae consequuntur, eveniet aut quam aliquam, ullam consectetur culpa! Soluta dolor ratione similique vel illo, quod dolore. Deleniti dolorem maxime, porro tempore nobis reprehenderit, hic placeat dolor animi perferendis impedit, earum quidem velit a maiores! Eligendi voluptatum possimus consequatur cupiditate aperiam, iusto qui quam perferendis, incidunt distinctio beatae aspernatur vero, aliquam quibusdam labore necessitatibus. Rerum, quis, dolorem velit alias in impedit, doloremque, iste esse facere perferendis amet ipsam obcaecati porro cum consequuntur doloribus molestiae unde illum itaque quo culpa molestias. Laborum nesciunt doloribus eveniet deleniti, quaerat sunt reprehenderit autem dolorum voluptatem cupiditate officiis natus modi, unde tenetur eligendi hic nostrum nihil veritatis aspernatur consectetur odit! Quibusdam laudantium repudiandae voluptatem enim, odio ratione ad illum eaque id impedit molestias, non accusamus fuga. Accusantium quia enim maiores, natus quaerat? Expedita accusantium ipsam vel magnam sequi id delectus culpa! Nihil illum, natus eum ipsam explicabo adipisci minus accusamus provident soluta quis officia veritatis commodi porro voluptas molestiae sed vitae quisquam vero consequatur illo ex voluptates reiciendis aut ratione. Suscipit id enim, assumenda veniam voluptatum nihil laborum neque saepe! </main> </div>
SCSS
.side-navigation-toggle .hamburger{ display: inline-block; width: 22px; height: 3px; transform: translateY(-5px); background: #888; position: relative; transition: background 0.2s ease; &:before, &:after { content: ''; display: inline-block; background: #888; height: 3px; width: 100%; position: absolute; left: 0; transform-origin: center right; transition: transform 0.2s ease; } &:before { top: -8px; } &:after { bottom: -8px; } } .menu.open + .side-navigation-toggle .hamburger { background: transparent; transform: translate(-17px, -5px); &:before { transform: rotate(-45deg); } &:after { transform: rotate(45deg); } } .navbar-content { position: relative; left: 0; right: 0; display: flex; flex-direction: row; width: 100%; background-color: rgba(255,255,255,.97); box-shadow: 0 1px 0 0 rgba(38,38,38,.1); z-index: 42; } .navbar-fixed .navbar-content { background-color: #ddd; } .navbar, .side-navigation-controls { -webkit-box-orient: horizontal; -webkit-box-direction: normal; } .navbar .logo { max-width: 7.75rem; max-height: 3.25rem; padding: .8rem .75rem .2rem; } .navbar .logo-img { max-width: 6.25rem; max-height: 2rem; } .menu .nav-item, .menu-item, .menu-navigation { position: relative; display: inline-block; margin: 0; padding: 0; } .menu-navigation { -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; font-family: "Gotham A","Gotham B","Helvetica Neue",Helvetica-Neue,HelveticaNeue,Helvetica,Arial,"Lucida Grande",sans-serif; font-weight: 500; color: #7c858c; } .menu .menu-item { cursor: pointer; } .menu .nav-item, .menu-item { font-size: .75rem; vertical-align: middle; user-select: none; } .menu .nav-item, .menu-item, .side-navigation-toggle { line-height: 1; user-select: none; cursor: pointer; -webkit-touch-callout: none; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } .menu .nav-item>a, .menu-item>a { display: block; color: inherit; border: 0; text-decoration: none; cursor: pointer; padding: 1.125rem 1rem; } .menu__dropdown-menu { position: absolute; display: block; width: auto; min-width: 100%; white-space: no-wrap; left: 0; margin: 0; padding: 0; z-index: 40; border-radius: 2px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.12), 0 6px 16px -2px rgba(0,0,0,.15), 0 10px 30px -8px rgba(0,0,0,.09); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(6px); transition: transform .15s ease 0s,-webkit-transform .15s ease 0s,opacity .15s ease 0s,visibility 0s ease .15s; -webkit-backface-visibility: hidden; will-change: transform,opacity; } .menu__dropdown-menu .menu-item:first-child { border-radius: 2px 2px 0 0; } .menu__dropdown-menu .menu-item { display: block; position: relative; overflow: hidden; } .menu__dropdown-menu .menu-item a, .menu__sidenav .menu-item a { font-family: "Helvetica Neue",Helvetica-Neue,HelveticaNeue,Helvetica,Arial,sans-serif; font-style: normal; letter-spacing: .03em; text-rendering: optimizeLegibility; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-transform: none; font-weight: 400; color: #2c2f36; font-size: 14px; line-height: 18px; padding: 12px; text-decoration: none; white-space: nowrap; transition: background-color .35s ease,color .35s ease; } li .caption, li [class*=label-placement], td .caption, td [class*=label-placement] { position: relative; } li .caption, td .caption { display: block; z-index: 0; } .menu .menu-item:active .menu__dropdown-menu, .menu .menu-item:focus .menu__dropdown-menu, .menu .menu-item:hover .menu__dropdown-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: transform .25s,-webkit-transform .25s,opacity .25s ease,visibility 0s ease 0s; } .menu__dropdown-menu .menu-item a:hover, .menu__sidenav .menu-item a:hover { color: #262626; background-color: #eceef1; transition-duration: .1s; } .menu .nav-item>a.active, .menu-item>a.active { box-shadow: inset 0 -2px 0 0 #2c2f36; color: #2c2f36; } .menu-navigation { font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.2; text-transform: uppercase; text-rendering: optimizeLegibility; font-style: normal; } .side-navigation-toggle { display: block; margin-left: auto; background-color: #fff; display: block; max-width: 22rem; min-width: 20rem; text-align: right; color: inherit; text-decoration: none; padding: 8px 30px 6px 10px; user-select: none; position: relative; z-index: 90; } @media (max-width: 991px) { .side-navigation-toggle { min-width: 1rem; } } .side-navigation-toggle-icon { font-size: 1.75rem; vertical-align: middle; color: #0c3dd1; } @media (min-width: 1040px) { .menu .nav-item, .menu-item { font-size: .875rem; } } main { padding: 20px; transition: transform 0.3s ease; } $mobileBreakpointUp: 992px; $mobileBreakpointDown: 991px; @media (min-width: $mobileBreakpointUp) { .menu { flex: 1 1 auto; display: flex; justify-content: center; } .hidden-lg-up { display: none !important; } } @media (max-width: $mobileBreakpointDown) { .navbar { z-index: 43; } .dimmer { position: fixed; left: 0; top: 0; bottom: 0; right:0; z-index: 41; background: rgba(0,0,0,0.5); opacity:0; visibility: hidden; transition: opacity 0.2s ease; } .dimmer.visible { visibility: visible; opacity: 1; } .menu { width: auto; max-width: 22rem; background: #fff; transform: translateX(0); z-index: 80; position: fixed; right: 0; transition: transform 0.2s ease; transform: translate3d(100%,0,0); overflow-y: auto; overflow-x:hidden; max-height: 100%; -webkit-overflow-scrolling: touch; padding-right: 1rem; } .menu.open { transform: matrix(1, 0, 0, 1, 0, 0); } .menu .nav-item, .menu-item, .side-navigation-toggle { display: block; } .menu__dropdown-menu { position: relative; visibility: visible; opacity: 1; pointer-events: all; transform: translateY(0); box-shadow: none; } .nav-link { font-family: "Gotham A","Gotham B","Helvetica Neue",Helvetica-Neue,HelveticaNeue,Helvetica,Arial,"Lucida Grande",sans-serif; font-weight: 700; line-height: 1.2; color: #262626; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; width: 100%; padding: .25rem 1.25rem; margin: 0; text-transform: uppercase; font-size: .9375rem; border: 0; color: #262626; letter-spacing: .1em; border-top: 1px solid #dcdddf !important; } .menu .nav-item>a.active, .menu-item>a.active { box-shadow: none; color: #2c2f36; } .menu .nav-item .nav-link:hover { color: #1e53f2; } .menu .ui-list-item.menu-item a { font-family: "Helvetica Neue",Helvetica-Neue,HelveticaNeue,Helvetica,Arial,sans-serif; font-feature-settings: "kern"; -webkit-font-feature-settings: "kern"; -moz-font-feature-settings: "kern"; -moz-font-feature-settings: "kern=1"; font-weight: 400; color: #7c858c; font-size: 14px; line-height: 1; letter-spacing: .015em; border: 0; padding: .75rem 1.25rem; cursor: pointer; user-select: none; } .menu .ui-list-item.menu-item a:hover { color: #262626; background-color: transparent; } } @media (min-width: 768px) { .side-navigation-toggle { padding: 0 1rem; line-height: 3.2rem; } .side-navigation-toggle-icon { font-size: 1.5rem; color: #262626; } } @media (min-width: 576px) { .hidden-sm-up { display: none!important; } .side-navigation-toggle { padding: 10px 30px 8px 10px; } .navbar .logo { padding: .6rem .75rem .1rem; } } .no-overflow { overflow: hidden; }
JAVASCRIPT
window.onload = function() { setTimeout( ()=> { let windowOffset = 0; let menu = document.getElementsByClassName('menu')[0]; let main = document.getElementsByClassName('main')[0]; let page = document.getElementsByClassName('page')[0]; let navbar = document.getElementsByClassName('navbar')[0]; let navbarContent = document.getElementsByClassName('navbar-content')[0]; let hamburger = document.getElementsByClassName('side-navigation-toggle')[0]; let dimmer = document.getElementsByClassName('dimmer')[0]; hamburger.addEventListener('click', () => { menu.classList.toggle('open'); dimmer.classList.toggle('visible'); checkHideScrollbar(); }) dimmer.addEventListener('click', () => { menu.classList.toggle('open'); dimmer.classList.toggle('visible'); checkHideScrollbar(); }) navbar.style.height = document.getElementsByClassName('navbar-content')[0].getBoundingClientRect().height + 'px'; function checkHideScrollbar(){ if (dimmer.classList.contains('visible')) { main.style.transform = 'translateX(-'+ menu.getBoundingClientRect().width + 'px)' windowOffset = window.scrollY; page.classList.add('no-overflow'); page.style.maxHeight = window.innerHeight + 'px'; page.scrollTo(0,windowOffset); } else { main.style.transform = 'translateX(0)'; page.scrollTo(0,0); page.classList.remove('no-overflow'); page.style.maxHeight = 'unset'; window.scrollTo(0,windowOffset); } } function animateScrollbar(type){ if (type == 'add' && !navbar.classList.contains('navbar-fixed')) { navbar.classList.add('navbar-fixed'); navbarContent.style.position = 'fixed'; navbarContent.style.transition = 'top 0s ease'; navbarContent.style.top = -1*(navbarContent.getBoundingClientRect().height + 5) + 'px'; setTimeout( () => { navbarContent.style.transition = 'top 0.3s ease'; navbarContent.style.top = 0; },3 ); } if (type == 'remove' && navbar.classList.contains('navbar-fixed')) { navbarContent.style.transition = 'top 0.3s ease'; navbarContent.style.top = 0; setTimeout( () => { navbarContent.style.top = -1*(navbarContent.getBoundingClientRect().height + 5) + 'px'; }) setTimeout( () => { navbar.classList.remove('navbar-fixed') navbarContent.style.position = 'relative'; navbarContent.style.top = 0; },300); } } function checkNavigationFixed(){ !menu.classList.contains('open') && (( window.scrollY > navbar.offsetHeight+80) ? animateScrollbar('add') : animateScrollbar('remove')); } window.addEventListener( 'scroll', checkNavigationFixed); if (matchMedia) { var mq = window.matchMedia("(max-width: 991px)"); mq.addListener(WidthChange); WidthChange(mq); } function WidthChange(mq) { menu.style.top = mq.matches ? navbarContent.getBoundingClientRect().height + 'px' : 0; } },0) }
Expand for more options Login