/* menu style 1 */ body:has(.political-header button[aria-expanded='true']) { overflow: hidden; } .political-header { position: fixed; top: 0; left: 0; width: 100%; height: 58px; z-index: 99; background: rgba(18,103,229,0.95) 30%; transition: height ease 0.4s; } .political-header:has(button[aria-expanded='true']) { height: 100%; background: linear-gradient(160deg, rgb(227 17 18 / 1) 30%, rgb(18,103,229,0.95) 110%); } .political-header .navbar { padding: 0; } .political-header .navbar .navbar-nav { align-items: center; } .navbar-toggler:focus { outline: none; } .political-header .navbar .navbar-nav .nav-item { padding: 5px 15px; } .political-header .navbar .navbar-nav .nav-link, .political-header .navbar .navbar-nav .nav-link:hover, .political-header .navbar .navbar-nav .nav-link:focus { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; line-height: 17px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-align: center; transition: all ease 0.4s; } .political-header .navbar .navbar-nav .nav-link.active { color: var(--quaternary-color); } .political-header .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; } .political-header .navbar .navbar-nav .nav-link.btn-donate:hover { background-color: transparent; color: #15213D !important; border: 1px solid #1267E6; } .submenu { margin-left: 20px; } .political-header .dropdown-item.active, .political-header .dropdown-item:active { background-color: #f8f9fa; color: #16181b; } .navbar-cross-icon { display: block; width: 1.5em; height: 1.5em; position: relative; } .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); } .hamburger_icon { display: block; } .cross_icon { display: none; } .political-header button { border: none; } .political-header button .hamburger_icon { color: #fff; } .political-header:has(button[aria-expanded='true']) .hamburger_icon { display: none; } .political-header:has(button[aria-expanded='true']) .cross_icon { display: block; } .custom_submenu span img { filter: brightness(0)invert(1); } .custom_submenu.active span img, .custom_submenu:hover span img { filter: brightness(0); } @media (min-width: 992px){ .political-header .navbar { position: relative; max-width: 100%; margin: auto; padding: 30px 0; } .political-header .navbar .navbar-brand { position: absolute; left: 0; right: 0; margin: auto; max-width: 240px; } .political-header .navbar .navbar-nav { justify-content: flex-start; align-items: center; } .political-header .navbar .navbar-nav .nav-link { color: #15213D; } .political-header .navbar .navbar-nav .nav-link:hover, .political-header .navbar .navbar-nav .nav-link:focus, .political-header .navbar .navbar-nav .nav-link.active { color: #E31112; } .political-header .navbar .navbar-nav .nav-item { padding: 0 2px; } .political-header .navbar .navbar-nav .nav-item:nth-of-type(4) { margin-right: 300px; } #main_nav { justify-content: center; } .political-header .navbar .navbar-nav .nav-link.btn-donate { font-size: 13px; padding: 12px 15px; min-width: 140px; } .political-header .navbar .navbar-nav .nav-link.btn-donate::after { display: none; } .political-header .dropdown-item.active, .political-header .dropdown-item:active { background-color: transparent; color: #E31112; } .custom_submenu span img { filter: brightness(0); margin-left: 30px; } .political-header { position: relative; height: auto; } .dropdown-menu > li .custom_submenu.active span img, .dropdown-menu > li:hover .custom_submenu span img { filter: grayscale(100%) invert(100%) sepia(100%) saturate(5000%) hue-rotate(18deg); } } @media (min-width: 1200px){ .political-header .navbar .navbar-nav .nav-link, .political-header .navbar .navbar-nav .nav-link:hover, .political-header .navbar .navbar-nav .nav-link:focus { font-weight: bold; font-size: 14px; } .political-header .navbar .navbar-nav .nav-link.btn-donate { font-size: 14px; white-space: nowrap; } .political-header .navbar .navbar-nav .nav-item { padding: 0 5px; } .political-header .navbar .navbar-nav .nav-item:nth-of-type(4) { margin-right: 400px; } } @media (min-width: 1366px){ .political-header .navbar { max-width: 1220px; margin: auto; padding: 50px 0; } .political-header .navbar .navbar-nav .nav-item { padding: 0 21px; } .political-header .navbar .navbar-nav .nav-item:nth-of-type(4) { margin-right: 400px; } } @media (min-width: 1500px) { .political-header .navbar .navbar-nav .nav-item { padding: 0 30px; } } @media (min-width: 1680px) { .political-header .navbar .navbar-nav .nav-item:nth-of-type(4) { margin-right: 400px; } } /* for drop down responsive part only */ header.header { background-color: #E31112; } header.header .container-fluid { padding: 0; } header.header .navbar-brand { margin-left: 15px; max-width: 180px; padding: 10px 0; } .navbar-collapse { position: absolute; top: 55px; width: 100%; z-index: 99; padding: 10px 0; } .dropdown-menu { background-color: #cd0604; border-radius: 0px; border: none; } .dropdown-item { color: #fff; font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 14px; line-height: 17px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; } @media (min-width: 992px) { header.header .container-fluid { padding-left: 15px; padding-right: 15px; } header.header .navbar-brand { margin-left: auto; } header.header, .navbar-collapse { background: transparent !important; } .navbar-collapse { position: relative; top: 0; padding: 0; } .dropdown-menu { box-shadow: 10px 10px 50px rgba(29, 44, 63, 0.1); border-radius: 5px; border: none; padding: 25px 0; background-color: #fff; margin-top: 0; } .dropdown-menu .dropdown-menu { margin-left:0; margin-right: 0; } .dropdown-menu li { position: relative; margin-bottom: 10px; padding: 0 25px; } .dropdown-menu li:last-child { margin-bottom: 0; } .nav-item .submenu{ position: absolute; left: calc(100% + 0px); top:-7px; } .nav-item .submenu-left{ right:100%; left:auto; } .dropdown-menu > li:hover, .dropdown-item:focus, .dropdown-item:hover { background: transparent !important; } .dropdown-menu > li:hover > .dropdown-item { color: #E31112; } .dropdown-menu > li:hover > .submenu{ display: block; } .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; } /* dropdown action on hover */ .dropdown:hover .dropdown-menu { display: block; } .dropdown:hover .submenu.dropdown-menu { display: none; } .dropdown-menu li:hover .submenu.dropdown-menu { display: block; } }