.navbar { padding-left: 0; padding-right: 0; } .nav-item a, .navbar-dark .navbar-nav .nav-link { color: #ffffff; padding: 5px; position: relative; transition: all .5s; } .nav-item a.active, .navbar-dark .navbar-nav .nav-link.active { color: var(--primary-color); } .nav-item .dropdown-item.active { color: #fff; background-color: #007bff; } .nav-item .nav-link { text-align: center; } .nav-item { text-transform: uppercase; font-family: "Roboto", sans-serif; font-weight: bold; font-size: 0.875rem; letter-spacing: 0.1em; padding: 5px 10px; } nav.navbar .navbar-nav { align-items: center; } .nav-item.active { background: #E31112; } .nav-item.btn_item { background: #212C4D; } .navbar-brand { max-width: 167px; } .navbar-toggler:focus { outline: none; box-shadow: 0; } .navbar-collapse { justify-content: flex-end; } nav.navbar .navbar-nav .nav-item:nth-last-of-type(2) { display: none; } nav.navbar .navbar-nav .nav-link.btn-donate { background-color: #1267E6; color: #fff !important; padding: 15px 20px; border: 1px solid transparent; transition: all ease 0.4s; } nav.navbar .navbar-nav .nav-link.btn-donate:hover { background-color: transparent; border: 1px solid #1267E6; } nav.navbar .btn-donate:after { display: none; } .navbar-collapse { position: absolute; top: 55px; width: 100%; z-index: 99; padding: 10px 0; } .navbar-dark .navbar-toggler, .navbar-dark .navbar-toggler:focus { outline: none; border: none; padding-right: 0; } .navbar-cross-icon::before, .navbar-cross-icon::after { content: ''; position: absolute; width: 100%; height: 2px; background-color: #fff; top: 14px; left: 0; } .navbar-cross-icon::before { transform: rotate(45deg); } .navbar-cross-icon::after { transform: rotate(-45deg); } .cross_icon { display: none; position: relative; width: 32px; height: 32px; } .hamburger_icon { filter: brightness(0) invert(1); } .home_v2_toggle_btn[aria-expanded="true"] .cross_icon { display: block; } .home_v2_toggle_btn[aria-expanded="true"] .hamburger_icon { display: none; } @media screen and (min-width: 992px) { header.header, .navbar-collapse { background: transparent !important; } .navbar-collapse { position: static; padding: 0; } nav.navbar .navbar-nav { align-items: center; } .navbar-nav li { position: relative; } .navbar-nav li:hover > ul { flex-direction: column; transform: rotateX(0deg); } .navbar-nav ul { position: absolute; top: 100%; left: 0; box-shadow: 0px 0px 10px #b7b7b7; background: #ffffff; width: 100%; min-width: 9rem; padding: 5px; z-index: 2; transform-origin: top; transform: rotateX(-90deg); transition: transform 0.3s linear; } .navbar-nav ul li { font-family: var(--montserrat); font-weight: bold; font-size: 13px; padding: 10px 5px; border-top: 1px solid #e2e2e2; } .navbar-nav ul li:first-child { border-top: 0; } .navbar-nav ul li a { color: black; white-space: wrap; transition: all 0.5s ease; } .navbar-nav ul li a:hover { text-decoration: none; color: var(--primary-color); background: transparent; } .navbar-nav ul ul { top: 0px; left: 100%; } /* dropdown action on hover */ .dropdown:hover .dropdown-menu { display: block; border: none; margin: 0; } .dropdown-item { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #15213D; padding: 2px 0px; display: flex; justify-content: space-between; } .nav-item .dropdown-item.active { color: var(--primary-color); background-color: transparent; } .nav-item a.active, .navbar-dark .navbar-nav .nav-link.active { color: var(--black); } .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: var(--black); } .home3-main-header .nav-item a.active, .home3-main-header .navbar-dark .navbar-nav .nav-link.active { color: #1267E6; } .home3-main-header .navbar-dark .navbar-nav .nav-link:focus, .home3-main-header .navbar-dark .navbar-nav .nav-link:hover { color: #1267E6; } } @media screen and (min-width: 1200px) { .navbar-brand { max-width: 100%; } .navbar-nav ul { background: #ffffff; width: 170px; min-width: 10rem; } } @media screen and (max-width: 991px) { .main-header .navbar-collapse { position: absolute; top: 100%; left: 0; width: 100%; } .navbar-nav .active ul li a { color: var(--quaternary-color); } .navbar-nav ul li a { color: #16181b; font-family: var(--montserrat); font-weight: bold; font-size: 13px; transition: all ease 0.4s; } .navbar-nav ul li a:hover, .navbar-nav ul li a:focus { background-color: #007bff; color: var(--white); } .navbar-nav ul li { position: relative; padding-left: 30px; } .navbar-nav .active ul li:before { background: var(--quaternary-color); } .navbar-nav ul li:before { content: ''; position: absolute; top: 12px; left: 0; background: #16181b; width: 20px; height: 2px; } .main-header .btn_item { margin-left: 10px; margin-bottom: 20px; } }