*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } /* Language switcher */ .wpml-ls-legacy-list-horizontal { display: flex; justify-content: center; color: inherit; } .wpml-ls-legacy-list-horizontal .wpml-ls-item .wpml-ls-link { color: #fff; } .wpml-ls-legacy-list-horizontal .wpml-ls-item .wpml-ls-link::hover { color: #fff; } /* BURGER ========================================== */ .burger { width: 50px; height: 50px; position: relative; } .burger span { position: relative; margin-top: 9px; margin-bottom: 9px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -1.5px; } .burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; background-color: #fff; outline: 1px solid transparent; -webkit-transition-property: background-color, -webkit-transform; -moz-transition-property: background-color, -moz-transform; -o-transition-property: background-color, -o-transform; transition-property: background-color, transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .burger span::before, .burger span::after { position: absolute; content: ""; } .burger span::before { top: -9px; } .burger span::after { top: 9px; } .burger.clicked { z-index: 910; } .burger.clicked span { background-color: transparent; } .burger.clicked span::before { -webkit-transform: translateY(9px) rotate(45deg); -moz-transform: translateY(9px) rotate(45deg); -ms-transform: translateY(9px) rotate(45deg); -o-transform: translateY(9px) rotate(45deg); transform: translateY(9px) rotate(45deg); } .burger.clicked span::after { -webkit-transform: translateY(-9px) rotate(-45deg); -moz-transform: translateY(-9px) rotate(-45deg); -ms-transform: translateY(-9px) rotate(-45deg); -o-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg); } .burger.clicked span:before, .burger.clicked span:after { background-color: #fff; } .burger:hover { cursor: pointer; } /* NAV ========================================== */ nav.burger-menu-nav { background-color: #141414; position: fixed; z-index: 900; top: 0; left: 0px; height: 100vh; max-width: 100%; width: 100%; padding: 110px 40px 60px 40px; overflow-y: auto; display: flex; justify-content: center; flex-direction: column; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86); -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86); } nav.burger-menu-nav.show-menu { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } nav.burger-menu-nav.show-menu ul.main li { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); opacity: 1; } nav.burger-menu-nav.show-menu ul.main li:nth-child(1) { transition-delay: 0.15s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(2) { transition-delay: 0.3s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(3) { transition-delay: 0.45s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(4) { transition-delay: 0.6s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(5) { transition-delay: 0.75s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(6) { transition-delay: 0.9s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(7) { transition-delay: 1.05s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(8) { transition-delay: 1.2s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(9) { transition-delay: 1.35s; } nav.burger-menu-nav.show-menu ul.main li:nth-child(10) { transition-delay: 1.50s; } nav.burger-menu-nav.show-menu .about, nav.burger-menu-nav.show-menu .social, nav.burger-menu-nav.show-menu ul.sub { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; transition-delay: 0.85s; } nav.burger-menu-nav ul.main { list-style-type: none; position: relative; padding: 30px 0; display: flex; flex-direction: column; align-items: center; } nav.burger-menu-nav ul.main li { margin: 0; text-align: center; padding: 15px 0; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } nav.burger-menu-nav ul.main li:last-of-type { margin-bottom: 0px; } nav.burger-menu-nav ul.main li a { color: #e6e6e6; font-family: inherit; font-style: normal; text-decoration: none; font-size: 1.4rem; letter-spacing: 1px; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } nav.burger-menu-nav ul.main li a span { color: #e6e6e6; } nav.burger-menu-nav ul.main li a:hover { color: #e6e6e6; } nav.burger-menu-nav .about { margin-top: 40px; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } nav.burger-menu-nav .about p { color: #ffffff; font-family: inherit; font-size: 1.05rem; letter-spacing: 0.5px; line-height: 150%; } nav.burger-menu-nav ul.sub { list-style-type: none; margin-top: 40px; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } nav.burger-menu-nav ul.sub li { margin-bottom: 10px; } nav.burger-menu-nav ul.sub li:last-of-type { margin-bottom: 0px; } nav.burger-menu-nav ul.sub li a { color: #e6e6e6; font-family: inherit; letter-spacing: 1px; font-size: 0.9rem; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } nav.burger-menu-nav ul.sub li a:hover { color: #e6e6e6; } /* OVERLAY ========================================== */ .overlay { position: fixed; top: 0; left: 0; z-index: 890; width: 100%; height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #023; opacity: 0; display: none; } .overlay.show-menu { opacity: 0.3; display: block; } /* mi propio css */ .svg-img { padding: 30px 20px 0px 10px } .svg-img img { width: 100%; } nav.burger-menu-nav.show-menu ul.main li>ul { display: none; list-style-type: none; padding-left: 40px; } nav.burger-menu-nav .main li>ul { display: none; } nav.burger-menu-nav .main li>.first-submenu { z-index: 1190; } nav.burger-menu-nav .main li>.second-submenu { z-index: 1195; } nav.burger-menu-nav .main li>a { z-index: 1200; } nav.burger-menu-nav .main li:hover { cursor: pointer; } nav.burger-menu-nav li.has-submenu .plus { display: block; width: 14px; height: 14px; padding: 10px; position: absolute; right: -30px; top: 15px; cursor: pointer; } /* Code to add a small + that animates on hover to the li elements with a submenu */ nav.burger-menu-nav li.has-submenu .plus:after { position: absolute; top: 11px; right: 5px; width: 13px; height: 1px; display: block; background: #fff; content: ""; } nav.burger-menu-nav li.has-submenu .plus:before { position: absolute; top: 5px; right: 11px; display: block; width: 1px; height: 13px; background: #fff; content: ""; -webkit-transition: all 0.25s ease; -ms-transition: all 0.25s ease; transition: all 0.25s ease; } nav.burger-menu-nav li.has-submenu .plus:hover:before { top: 30px; height: 0; } /* CODE FOR TEH SEARCH BOX */ .cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } /* Form wrapper styling */ .search-wrapper { width: auto; } /* Form text input */ .search-wrapper { display: flex; flex-wrap: wrap; width: 100%; font-family: inherit; } .search-wrapper input[type="search"] { border: none; background: #E9E9E9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.35em 0.75em; border: none; border-radius:0; font-size: 1em; text-decoration: none; line-height: normal; max-height: 3em; color: #333; font-weight: 200; flex: 2 0 250px; } @media (min-width: 667px) { nav.burger-menu-nav { padding: 120px 60px 70px 60px; } .svg-img { padding: 60px 20px 0px 10px; } } // Best way to use $(document).ready(function(){}); jQuery(function ($) { // Makes the hamburger menu show the browser. $('.burger, .overlay').click(function () { $('.burger').toggleClass('clicked'); $('.overlay').toggleClass('show-menu'); $('.burger-menu-nav').toggleClass('show-menu'); $('body').toggleClass('overflow'); $('body').toggleClass('menu-showed'); }); // Toggle the first submenu of the nav $('.main > li.has-submenu').each(function () { let myElement = $(this); let plusBtn = $(this).find('.plus'); plusBtn.click(function (e) { if (myElement.children(".first-submenu").css("display") == "none") { myElement.children(".first-submenu").slideDown(300); } else { myElement.children(".first-submenu").slideUp(200); } console.log("Click first"); }); }); // Toggle the second submenu of the nav $('.first-submenu > li.has-submenu').each(function () { let myElement = $(this); let plusBtn = $(this).find('.plus'); plusBtn.click(function (e) { e.stopPropagation(); if (myElement.children(".second-submenu").css("display") == "none") { myElement.children(".second-submenu").slideDown(300); } else if (myElement.children(".second-submenu").css("display") == "block") { myElement.children(".second-submenu").slideUp(200); } console.log("Click second"); }); }); // Stops propagation to the parent of the anchor tag (prevent it to close when it's clicked) $(".main a").each(function () { $(this).click(function(e) { e.stopPropagation(); }) }); });