LTD Nav CSS
unknown
plain_text
2 years ago
8.4 kB
5
Indexable
.yg_overflow-hidden{ overflow: hidden !important; } .yg_navbar .yg_overlay{ display: none; } .yg_overflow-hidden .yg_navbar .yg_overlay{ display: block; content: ''; width: 100%; height: 100%; top: 146px; left: 0; position: fixed; background: rgba(0, 0, 0, 0.6); z-index: 4; } .yg_desktop{ align-items: stretch !important; } .yg_hide{ display: none !important; } .yg_navbar{ flex: 1; margin: 0 45px; max-width: 675px; } .yg_navbar ul{ list-style: none; padding: 0; margin: 0; } .yg_navbar .yg_nav-links{ display: flex; justify-content: space-between; align-items: center; height: 100%; gap: 10px; } .yg_navbar .main_menu { display: flex; align-items: center; height: 100%; } .yg_navbar .yg_nav-links .main_menu-item{ color: rgba(98, 98, 98, 1); font-weight: 700; font-size: 12px; line-height: 18px; letter-spacing: 2px; font-family: 'Arial', sans-serif; } .yg_mobileNav [href*="/clearance"], .yg_header [href*="/clearance"]{ color: rgba(225, 31, 39, 1) !important; } .yg_mobileNav [href*="/clearance"]::after{ border-color: rgba(225, 31, 39, 1) !important; } .yg_navbar .yg_nav-links .submenu-show .main_menu-item{ color: #00ADBB; } .yg_navbar .yg_nav-links .main_menu-item:hover{ color: #00ADBB; } .yg_navbar .yg_nav-links .has-submenu:hover .main_menu-item{ position: relative; } .yg_navbar .yg_nav-links .has-submenu:hover .main_menu-item::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 72px; opacity: .5; } .yg_navbar .yg_nav-links .submenu { display: none; position: fixed; z-index: 5; width: 100%; left: 0; top: 146px; background: #fff; padding: 64px; overflow-x: hidden; max-height: 634px; border-top: 1px solid rgba(229, 229, 229, 1); } .yg_navbar .yg_nav-links .submenu-show .submenu { display: block; } .yg_navbar .submenu_body { display: flex; justify-content: space-between; max-width: 1110px; margin: auto; } .yg_navbar .submenu_body h3{ font-family: 'Helvetica Neue', sans-serif; color: rgba(35, 44, 44, 1); font-size: 16px; font-weight: 700; line-height: 24px; } .yg_navbar .submenu_body h3, .yg_navbar .submenu_body li{ margin-bottom: 24px; } .yg_navbar .submenu_body li a{ font-family: 'Helvetica Neue', sans-serif; color: rgba(98, 98, 98, 1); font-size: 16px; font-weight: 400; line-height: 24px; } .yg_navbar .submenu_body li a:hover{ color: #00ADBB; } .yg_navbar .submenu_body .submenu_footer-link{ font-family: 'Helvetica Neue', sans-serif; color: rgba(98, 98, 98, 1); font-size: 16px; font-weight: 700; line-height: 24px; text-transform: uppercase; } .yg_navbar .submenu_body .submenu_footer-link:hover{ text-decoration: underline; } /* mobile css */ .mobileMenu-toggle { display: block; padding-left: 0; width: 23px; margin-right: 10px; top: 20px; position: relative; display: none; } .mobileMenu-toggle .mobileMenu-toggleIcon { transition: background-color 10ms ease-in .1s; } .mobileMenu-toggle .mobileMenu-toggleIcon, .mobileMenu-toggle .mobileMenu-toggleIcon::after, .mobileMenu-toggle .mobileMenu-toggleIcon::before{ background: #939597; content: ""; display: block; height: 2px; position: absolute; transform: rotate(0); transition: transform .1s ease-in,top .1s ease-in 150ms,bottom .1s ease-in 150ms; width: 1.42857rem; } .mobileMenu-toggle .mobileMenu-toggleIcon::after{ bottom: -0.5rem; } .mobileMenu-toggle .mobileMenu-toggleIcon::before { top: -0.5rem; } .mobileMenu-toggle.is-open .mobileMenu-toggleIcon::before { top: 0; transform: rotate(45deg); } .mobileMenu-toggle.is-open .mobileMenu-toggleIcon::after { bottom: 0; transform: rotate(-45deg); } .mobileMenu-toggle.is-open .mobileMenu-toggleIcon { background-color: transparent; transition-delay: 0.1s; } .yg_mobileNav { position: fixed; top: 146px; background: rgba(245, 244, 242, 1); left: -100%; z-index: 9999999999; height: 100%; width: 100%; padding: 0 16px; transition: left 0.3s ease-in-out; } .yg_mobileNav.active{ left: 0; overflow-x: hidden; } .yg_mobileNav ul{ list-style: none; padding: 0; margin: 0; } .yg_mobileNav .submenu { max-height: 0; overflow: hidden; transition: all 0.3s ease-in-out; } .yg_mobileNav .submenu .submenu_body{ background: #fff; border-radius: 8px; padding: 8px 32px 24px; margin-top: 16px; } .yg_mobileNav .main_menu-item{ font-family: 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 700; line-height: 21px; letter-spacing: 2px; margin-left: 12px; color: rgba(98, 98, 98, 1); display: flex; } .yg_mobileNav .main_menu.submenu-show .main_menu-item{ color: rgba(0, 173, 187, 1); } .yg_mobileNav .main_menu { padding: 22px 0 18px; border-bottom: 1px solid rgba(220, 220, 220, 1); position: relative; } .yg_mobileNav .main_menu-item::after { content: ''; position: absolute; width: 10px; height: 10px; border-right: 2px solid; border-bottom: 2px solid; border-color: rgba(98, 98, 98, 1); top: 36px; right: 5px; transform: rotate(315deg); margin-top: -8px; transition: all 250ms ease; } .yg_mobileNav .main_menu.submenu-show .main_menu-item::after{ border-color: rgba(0, 173, 187, 1); margin-top: -3px; transform: rotate(225deg); } .yg_mobileNav .main_menu.submenu-show .submenu{ max-height: 800px; border-top: 1px solid rgba(220, 220, 220, 1); margin-top: 22px; transition: all 0.3s ease-in-out; } .yg_mobileNav .main_menu .submenu h3{ font-family: 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 700; line-height: 33px; letter-spacing: 0em; color: rgba(98, 98, 98, 1); margin: 0; padding: 7px 0; position: relative; } .yg_mobileNav .yg_child-accordion .submenu h3{ border-bottom: 1px solid rgba(220, 220, 220, 1); cursor: pointer; margin-bottom: 24px; } .yg_mobileNav .yg_child-accordion .submenu h3::after{ content: ''; position: absolute; width: 10px; height: 10px; border-right: 2px solid; border-bottom: 2px solid; border-color: rgba(98, 98, 98, 1); top: 25px; right: 5px; transform: rotate(45deg); margin-top: -8px; transition: all 250ms ease; } .yg_mobileNav .yg_child-accordion .submenu .submenu_footer-link, .yg_mobileNav .yg_child-accordion .submenu ul{ padding: 0 16px; } .yg_mobileNav .main_menu .submenu li a{ font-family: 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 400; line-height: 33px; letter-spacing: 0em; color: rgba(98, 98, 98, 1); } .yg_mobileNav .main_menu .submenu .submenu_footer-link{ font-family: Helvetica Neue; font-size: 14px; font-weight: 700; line-height: 33px; letter-spacing: 0em; color: rgba(98, 98, 98, 1); } .yg_mobileNav .yg_child-accordion .submenu_wrapper { max-height: 49px; overflow: hidden; transition: max-height 0.3s ease-in-out; } .yg_mobileNav .yg_child-accordion .submenu_wrapper.active{ max-height: 800px; transition: max-height 0.3s ease-in-out; margin-bottom: 24px; } .yg_mobileNav .yg_child-accordion .submenu_wrapper.active h3{ color: rgba(0, 173, 187, 1); border-bottom-color: rgba(0, 173, 187, 1); } .yg_mobileNav .yg_child-accordion .submenu_wrapper.active h3::after{ border-color: rgba(0, 173, 187, 1); margin-top: -3px; transform: rotate(-135deg); } @media screen and (min-width: 1361px){ .yg_mobileNav{ display: none; } } @media screen and (max-width: 1400px){ .yg_navbar{ margin: 0px 26px; } } @media screen and (max-width: 1360px){ .yg_navbar{ display: none; } .mobileMenu-toggle{ display: block; } } @media screen and (max-width: 991px){ .mobileMenu-toggle{ top: 13px; left: 18px; } } @media screen and (max-width: 767px){ .yg_desktop{ justify-content: space-between !important; margin-right: 22px; } }
Editor is loading...
Leave a Comment