.main-menu-wrapper { position: relative; } .site-navigation { text-align: center; } .is-sticky .main-menu-wrapper { background: #fff; z-index: 999; box-shadow: 0 0 6px rgba(0,0,0,0.1); } .is-sticky .site-navigation ul li a { line-height: 54px; } .is-sticky .site-navigation ul li a::after { top: 19px; } .site-navigation ul { margin: 0; list-style: none; padding-left: 0; } .site-navigation ul li { display: inline-block; position: relative; } .site-navigation ul li a { padding: 0 15px; display: block; line-height: 22px; position: relative; } .site-navigation > ul > li > a { line-height:55px; } .site-navigation ul li a::after { content: ""; width: 1px; position: absolute; top: 20px; right: 0; height: 16px; background: #f5f5f5; } .site-navigation ul li:last-child a:after { display: none; } .site-navigation ul li .sub-menu, .site-navigation ul li .children { display:none; background: $white; min-width: 250px; text-align: left; position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; box-shadow: 0 0 5px rgba(0,0,0,0.1); z-index: 99; } .site-navigation ul li .sub-menu ul, .site-navigation ul li .children ul { left: 100%; top: 0; } .site-navigation ul li:hover > .sub-menu, .site-navigation ul li:hover > .children { display:block; opacity: 1; visibility: visible; } .site-navigation ul li .sub-menu li, .site-navigation ul li .children li { display: block; padding: 0; } .site-navigation ul li .sub-menu li a, .site-navigation ul li .children li a { padding: 10px 15px; border-bottom: 1px solid $border_color; border-right: none; line-height: 24px; } .site-navigation ul li .sub-menu li a:after, .site-navigation ul li .children li a:after { display: none; } // carat down .sub-toggle { display:none; } // toggle menu .menu-toggle { display: none; font-size: 0; font-weight: normal; cursor: pointer; } .menu-toggle span { display:block; width:20px; height:4px; margin-bottom: 6px; background:$primary_color; @include transation_delay(); } .menu-toggle span:nth-child(2) { width:30px; } .menu-toggle span:nth-child(3) { width:40px; margin-bottom:0; } body.menu-toggle-active .menu-toggle span { width:30px; }