/* NEW Template TOP NAV ONLY -- RESPONSIVE NAVIGATION - USING CURRENT STRUCTURE FOR navigation_menu.cfm ---- THIS IS A RESPONSIVE TEMPLATE using Bootstrap v4.1.3 - Boxed Layout -- TEMPLATE 0010 ========= HTML BUILD BETA v1.0 - Adriana - UPDATED 09-09-2020 */ /* == SAME OLD TEMPLATE TOP-NAV: just added structure to work with BS4 */ /* =================================================================================================== */ /* ====== DO NOT CHANGE - STILL USING - OLD TEMPLATE BOOTSTRAP 2 -TOP-NAV STRUCTURE ONLY ======= */ /* ====== GENERAL NAV items ======*/ #main_top_nav ul, li { margin: 0; padding: 0; border: 0; /* DO NOT CHANGE */ } #main_top_nav { margin: 0 auto;} #main_top_nav ul ul { display: none;} #main_top_nav ul li:hover > ul { display: block;} #main_top_nav ul { list-style: none; position: relative; display: inline-table; z-index: 10; } #main_top_nav ul:after { content: ""; clear: both; display: block;} #main_top_nav ul li { float: left;} /* ======= FIRST level items ======== */ #main_top_nav ul li a { display: block;} /* ======= SECOND level items ======= */ #main_top_nav ul ul { padding: 0; position: absolute; top: 100%; } #main_top_nav ul ul li { float: none; position: relative; } /* =================== Bootrstrap 4 overrides revised 6-16-20 to use under current nav structure ================================================================================================*/ /* ================= FOR TOP NAV - COLLAPSED ======================= */ .navbar-toggler { color: rgba(255, 255, 255, 0.8); border-color: transparent; background-color: transparent; } .navbar-color .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* IMPORTANT - Pick just one to align the toggler icon */ .nav-align-toggler { /*LEFT*/ /*margin-right: auto !important;*/ /*RIGHT*/ margin-left: auto !important; } /* ===================== NEW GENERAL TOP NAVBAR STYLING ================================ */ .main-nav-container { padding-right: 0; padding-left: 0; /* DO NOT CHANGE */ } .navbar { padding: 0; } /* SET FULL NAVBAR COLOR */ .navbar-color { background-color: var(--navbar-primaryColor) !important; } /*Medium devices (tablets, less than 992px)*/ @media (max-width: 991.98px) { .navbar { padding: 0.5rem 1rem; } } /*=== IMPORTANT - Pick just one to align the navbar items - comment rest out ===*/ /*== LEFT ==*/ /*.nav-align-items {-webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important;} #main_top_nav .nav_lvl_1:first-child a { margin-left: 15px; } #main_top_nav .nav_lvl_1:last-child a { margin-right: 0px; }*/ /*== RIGHT or IMPORTANT to use with TOP NAV WITH BRAND LOGO ==*/ /*.nav-align-items { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important;} #main_top_nav .nav_lvl_1:first-child a { margin-left: 0; } #main_top_nav .nav_lvl_1:last-child a { margin-right: 0; }*/ /*== CENTER ==*/ .nav-align-items { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;} #main_top_nav .nav_lvl_1:first-child a { margin-left: 0; } #main_top_nav .nav_lvl_1:last-child a { margin-right: 0; } /* ========= TOP-NAV - STYLING (mostly the same as the old BS2 template) =========== */ /* ======= GENERAL NAV items =======*/ #main_top_nav { font-family: var(--siteFont-nav); line-height: 0.095em; font-size: .9rem; padding: 0 0.75rem; font-weight: normal; text-transform: uppercase; letter-spacing: .03rem; text-align: center; } #main_top_nav ul { background-color: transparent; /*do not change, takes same color of full navbar */ padding: 0 15px 0 0; } #main_top_nav ul li { line-height: 1.35em; } /* ======== FIRST level items ======== */ #main_top_nav ul li a { margin-right: 7px; padding: 18px 8px; text-decoration: none; text-transform: uppercase; font-weight: bold; } #main_top_nav a.nav_lvl_1 { color: var(--navbar-primaryColor-text); background-color: var(--navbar-primaryColor); } #main_top_nav a.nav_lvl_1:focus, #main_top_nav a.nav_lvl_1:hover { color: var(--navbar-secondaryColor-text); background-color: var(--navbar-secondaryColor); } /*Large devices (desktops, less than 1200px)*/ @media (max-width: 1199.98px) { #main_top_nav ul li a { margin-right: 6px; padding-left: 6px; } } /*Medium devices (tablets, less than 992px)*/ @media (max-width: 991.98px) { #main_top_nav li a.nav_lvl_1 { border-top: 1px solid rgba(255,255,255, 0.3); } #main_top_nav li:first-child a.nav_lvl_1 { border-top: 0; } } /* ========= SECOND level items ========= */ #main_top_nav ul ul li { margin-left: 0px; margin-right: 0px; min-width: 125px; text-align: left; } #main_top_nav a.nav_lvl_2 { color: var(--navbar-primaryColor-text); background-color: var(--navbar-primaryColor); text-transform: capitalize; font-weight: normal; padding: 8px 12px; border-top: 1px solid rgba(255,255,255, 0.3); } #main_top_nav a.nav_lvl_2:hover, #main_top_nav a.nav_lvl_2:hover { color: var(--navbar-secondaryColor-text); background-color: var(--navbar-secondaryColor); } /* ========= THIRD level items ========= */ #main_top_nav a.nav_lvl_3 { color: var(--navbar-primaryColor-text); background-color: var(--navbar-primaryColor); text-transform: capitalize; font-weight: normal; padding: 8px 22px; /* PADDING ONLY for third level li */ border-top: 1px solid rgba(255,255,255, 0.3); } #main_top_nav a.nav_lvl_3:hover, #main_top_nav a.nav_lvl_3:hover { color: var(--navbar-secondaryColor-text); background-color: var(--navbar-secondaryColor); } /* ========= CURRENT ITEM color for ALL level items ========= */ #main_top_nav a.current_page, #main_top_nav a.current_group { color: var(--navbar-secondaryColor-text); background-color: var(--navbar-secondaryColor); } /* Still BS2 - NAVIGATION COLLAPSED ============================================================================================*/ @media (max-width: 991.98px) { .navbar-custom { min-height: 40px; } #main_top_nav { text-align: left; /*full navbar alignment */ } #main_top_nav ul { display: block;} #main_top_nav ul li { float: none;} #main_top_nav ul ul { display: block; position: relative; } /* ======= GENERAL NAV items =======*/ #main_top_nav { line-height: 1.5em;} #main_top_nav ul { padding: 0px;} /* === FIRST level items === */ #main_top_nav ul li a { margin-right: 0px; padding: 6px 10px 6px 20px; } #main_top_nav .nav_lvl_1:first-child a { margin-left: 0px;} #main_top_nav .nav_lvl_1:last-child a { margin-right: 0px;} /* === SECOND level items === */ #main_top_nav a.nav_lvl_2 { padding: 6px 10px 6px 35px; } /* === THIRD level items === */ #main_top_nav a.nav_lvl_3 { padding: 6px 10px 6px 50px; } }