/*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-menu { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .site-navbar ul, .footer-menu ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; padding: 0; } .site-navbar ul.site-search-toggle, .site-navbar-menu { display: inline-block; } .site-search-toggle { cursor: pointer; } .site-navbar .site-search-wrap { position: absolute; top: 0; z-index: 999999; left: -999em; display: block; background: #f9f9f9; width: 100%; padding: 2em; text-align: center; white-space: nowrap; } .site-search-toggle.toggled .site-search-wrap { left: 0; } .site-search-toggle .site-search-wrap .fa-times { font-size: 2em; } .site-navbar .widget_product_search input[type="search"] { background: #fff; border: 2px solid #f2f2f2; } .site-navbar .widget_shopping_cart ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .site-navbar li, .footer-menu li { padding: .5em; } .site-navbar a { color: #262e4d; } a.remove { color: red; } .site-navbar a.remove { color: red; float: left; margin-right: 1em; } .site-navbar a.button { display: block; text-align: center; background: #00d6a5; color: #fff; border-radius: 3px; padding: .5em; margin: .5em; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation ul ul { float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation ul ul a { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: 1em; } .main-navigation li { position: relative; text-align: right; margin-left: auto; margin-left: 35px; position: relative; } .main-navigation ul ul a a:hover { padding: 10px 20px; } .main-navigation ul .sub-menu li:hover a { margin-left: 4px; } .main-navigation a { display: block; text-decoration: none; text-transform: uppercase; font-size: 16px; display: block; } .main-navigation a { color: #262626; padding: 20px 0; display: block; font-size: 16px; font-weight: 500; } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } .menu-toggle, .menu-toggle:hover, .menu-toggle:focus, .menu-toggle:active { margin: 0 auto 1em; border: none; background: transparent; padding: 0; color: #262e4d; } .main-navigation .fa-bars { width: 1em; } .main-navigation.toggled .fa-bars:before { content: "\f00d"; } @media screen and (min-width: 48em) { .menu-toggle { display: none; } .main-navigation ul { background: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .main-navigation ul ul { display: block; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: 0; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } .sub-menu li:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } .navbar-nav .sub-menu li a { color: #fff; display: block; padding: 10px 20px; margin: 0; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } @media (min-width: 990px) { .sub-menu li a { color: #fff; position: relative; display: block; padding: 10px 20px; margin: 0; transition: all .3s ease; -webkit-transition: all .3s ease; } .sub-menu li { padding: 0; margin: 0; position: relative; text-align: left; border-bottom: 1px solid #404040; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; background-color: rgba(0, 0, 0, 0.5); } } .navbar-toggler { padding: 3px 7px; line-height: 1; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; } .navbar-toggler-icon { display: block; width: 25px; height: 2px; vertical-align: middle; background: #fff; margin: 5px 0; } .menu.nav-menu .menu-item-has-children > a::after { border: none; content: "\f124"; font-weight: 500; font-family: Flaticon; width: auto; height: auto; font-size: 8px; vertical-align: middle; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin-left: 5px; } @media (max-width: 991px) { .navbar-collapse { background-color: #262626; margin-top: 20px; margin-left: 0; padding: 10px 25px; overflow-y: scroll; max-height: 300px; } .main-navigation a { color: #fff; } .main-navigation li { margin: 0; text-align: left; } } @media (max-width: 991px) { .menu-item-has-children a::after { float: right; color: #fff; } .main-navigation ul li:hover ul, .main-navigation ul li:focus ul { display: block; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: 1em; } .main-navigation ul ul a { width: auto; } .main-navigation ul li ul { width: calc(100%); } .main-navigation li.menu-item-has-children.focus > ul { display: block; position: static; min-width: 100%; opacity: 1; visibility: visible; z-index: 999 !important; } .main-navigation li ul.sub-menu li a::before { content: ""; position: absolute; width: 10px; left: -20px; top: 50%; height: 1px; background: #494949; } .main-navigation .sub-menu { border-left: dashed 1px #494949; padding-left: 20px; } .main-menu > ul > li.menu-item-has-children.on-focus > ul { display: block; position: static; min-width: 100%; opacity: 1; visibility: visible; z-index: 999 !important; } }