<link rel="stylesheet" href="css/bootsnav.css"/> .demo{ background: #291711; } nav.navbar.bootsnav{ border: none; background: none; margin-bottom: 150px; } nav.navbar.bootsnav ul.nav > li{ margin-right: 10px; } nav.navbar.bootsnav ul.nav > li > a{ padding: 15px 16px; margin: 0; color: #f47866; text-transform: uppercase; border-radius: 0; overflow: hidden; z-index: 1; transition: all 0.5s ease 0s; } nav.navbar.bootsnav ul.nav > li.dropdown > a{ padding: 15px 30px 15px 16px; } nav.navbar.bootsnav ul.nav > li > a:hover, nav.navbar.bootsnav ul.nav > li.on > a{ color: #f47866; } nav.navbar.bootsnav ul.nav > li > a > span:before{ content: ""; width: 100%; height: 100%; border-radius: 5px; border: 3px solid #f47866; position: absolute; top: 0; left: 0; opacity: 0; transform: scale(0); transform-origin: center; transition: all 0.3s ease 0s; } nav.navbar.bootsnav ul.nav > li:hover > a > span:before{ opacity: 1; transform: scale(1); } nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{ position: absolute; margin: 0 0 0 7px; } nav.navbar.bootsnav ul.nav > li.dropdown > ul{ top: 120%; transition: all 0.8s ease 0s; } nav.navbar.bootsnav ul.nav > li.dropdown.on > ul{ top: 100%; } .dropdown-menu.multi-dropdown{ position: absolute; left: -100% !important; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border: none; border-radius: 20px; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li{ font-size: 14px; color: #6f6f6f; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{ font-size: 16px; font-weight: bold; color: #3f3f3f; } @media only screen and (max-width:990px){ .dropdown-menu.multi-dropdown{ left: 0 !important; } nav.navbar.bootsnav .navbar-toggle{ background: none; color: #f47866; } nav.navbar.bootsnav ul.nav > li{ margin-right: 0; } nav.navbar.bootsnav.navbar-mobile ul.nav > li > a{ padding: 15px; text-align: center; } nav.navbar.bootsnav.navbar-mobile .navbar-collapse{ background: #f47866; } nav.navbar.bootsnav ul.nav > li > a, nav.navbar.bootsnav ul.nav > li > a:hover, nav.navbar.bootsnav ul.nav > li.on > a{ color: #291711; border: none; } nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a{ color: #291711; border-bottom-color: #291711; } nav.navbar.bootsnav ul.nav > li > a > span:before{ border-color: #291711; } nav.navbar.bootsnav ul.nav > li.dropdown > ul{ top: 100%; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{ font-size: 14px; font-weight: normal; } }