[et_pb_section fb_built=”1″ _builder_version=”4.14.2″ _module_preset=”default” da_disable_devices=”off|off|off” global_colors_info=”{}” da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_with_loader=”off” da_has_shadow=”on”][et_pb_row _builder_version=”4.14.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.14.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_code module_id=”menuToggle” _builder_version=”4.14.2″ _module_preset=”default” hover_enabled=”0″ custom_css_main_element=”/*|| * Made by Erik Terwan|| * 24th of November 2015|| * MIT License|| *|| *|| * If you are thinking of using this in|| * production code, beware of the browser|| * prefixes.|| */||||body {|| margin: 0;|| padding: 0;|||| /* make it look decent enough */|| background: #232323;|| color: #cdcdcd;|| font-family: %22Avenir Next%22, %22Avenir%22, sans-serif;||}||||#menuToggle {|| display: block;|| position: relative;|| top: 50px;|| left: 50px;|||| z-index: 1;|||| -webkit-user-select: none;|| user-select: none;||}||||#menuToggle a {|| text-decoration: none;|| color: #232323;|||| transition: color 0.3s ease;||}||||#menuToggle a:hover {|| color: tomato;||}||||#menuToggle input {|| display: block;|| width: 40px;|| height: 32px;|| position: absolute;|| top: -7px;|| left: -5px;|||| cursor: pointer;|||| opacity: 0; /* hide this */|| z-index: 2; /* and place it over the hamburger */|||| -webkit-touch-callout: none;||}||||/*|| * Just a quick hamburger|| */||#menuToggle span {|| display: block;|| width: 33px;|| height: 4px;|| margin-bottom: 5px;|| position: relative;|||| background: #cdcdcd;|| border-radius: 3px;|||| z-index: 1;|||| transform-origin: 4px 0px;|||| transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),|| background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;||}||||#menuToggle span:first-child {|| transform-origin: 0% 0%;||}||||#menuToggle span:nth-last-child(2) {|| transform-origin: 0% 100%;||}||||/* || * Transform all the slices of hamburger|| * into a crossmark.|| */||#menuToggle input:checked ~ span {|| opacity: 1;|| transform: rotate(45deg) translate(-2px, -1px);|| background: #232323;||}||||/*|| * But let’s hide the middle one.|| */||#menuToggle input:checked ~ span:nth-last-child(3) {|| opacity: 0;|| transform: rotate(0deg) scale(0.2, 0.2);||}||||/*|| * Ohyeah and the last one should go the other direction|| */||#menuToggle input:checked ~ span:nth-last-child(2) {|| transform: rotate(-45deg) translate(0, -1px);||}||||/*|| * Make this absolute positioned|| * at the top left of the screen|| */||#menu {|| position: absolute;|| width: 300px;|| margin: -100px 0 0 -50px;|| padding: 50px;|| padding-top: 125px;|||| background: #ededed;|| list-style-type: none;|| -webkit-font-smoothing: antialiased;|| /* to stop flickering of text in safari */|||| transform-origin: 0% 0%;|| transform: translate(-100%, 0);|||| transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);||}||||#menu li {|| padding: 10px 0;|| font-size: 22px;||}||||/*|| * And let’s slide it in from the left|| */||#menuToggle input:checked ~ ul {|| transform: none;||}||” global_colors_info=”{}” sticky_enabled=”0″][/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section]