/* CUSTOM TOP NAV 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 11-04-2020 - revised 04-13-21 */ /* for sticky top nav - DO NOT CHANGE/EDIT */ #nav-section { overflow: hidden; } .sticky { position: fixed; top: 0; width: 100%; z-index: 1000; } /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) *****IMPORTANT: a wrapping div to wrap all page content needs to exist ie: .after-nav-content-start. OR sticky nav will not work properly*/ .sticky + .after-nav-content-start { padding-top: 50px; } /* make sure you put the javascript in page_footers */ /* == 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 ======*/ #custom_top_nav ul, li { margin: 0; padding: 0; border: 0; /* DO NOT CHANGE */ } #custom_top_nav { margin: 0 auto;} #custom_top_nav ul ul { display: none;} #custom_top_nav ul li:hover > ul { display: block;} #custom_top_nav ul { list-style: none; position: relative; display: inline-table; z-index: 10; } #custom_top_nav ul:after { content: ""; clear: both; display: block;} #custom_top_nav ul li { float: left;} /* ======= FIRST level items ======== */ #custom_top_nav ul li a { display: block;} /* ======= SECOND level items ======= */ #custom_top_nav ul ul { padding: 0; position: absolute; top: 100%; } #custom_top_nav ul ul li { float: none; position: relative; } /*#custom_top_nav ul li:nth-child(3) {display:none;}*/ /* =================== 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='4' 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 ================================ */ #nav-section {background-color: var(--navbar-primaryColor);} .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 0rem; } } /* for MENU label next to collape hamburger icon */ #top-res-nav .menu-label { margin-right: 0.5rem; margin-left: 0; font-family: var(--siteFont-nav); line-height: 1.2rem; font-size: 1.1rem; letter-spacing: .03rem; text-align: left; color: var(--navbar-primaryColor-text); font-weight: 600; } /*=== 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;} #custom_top_nav ul li:first-child a { margin-left: 0px; } #custom_top_nav ul li: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;} #custom_top_nav ul li:first-child a { margin-left: 0; } #custom_top_nav ul li:last-child a { margin-right: 0; padding-right: 0; }*/ /*== CENTER ==*/ /*.nav-align-items { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important;} #custom_top_nav ul li:first-child a { margin-left: 0; } #custom_top_nav ul li:last-child a { margin-right: 0; } */ /* ========= TOP-NAV - STYLING (mostly the same as the old BS2 template) =========== */ /* ======= GENERAL NAV items =======*/ #custom_top_nav { font-family: var(--siteFont-nav); line-height: 1.2rem; font-size: 1.1rem; padding: 0 0.75rem; font-weight: normal; /* text-transform: uppercase;*/ letter-spacing: .03rem; text-align: center!important; } #custom_top_nav ul { background-color: transparent; /*do not change, takes same color of full navbar */ padding: 0 0 0 0; } #custom_top_nav ul li { line-height: 1.35em; } /* ======== FIRST level items ======== */ #custom_top_nav ul li a { /*margin-right: 7px;*/ padding: 14px 26px; text-decoration: none; /*text-transform: uppercase;*/ font-weight: 600; } #custom_top_nav a { color: var(--navbar-primaryColor-text); background-color: var(--navbar-primaryColor); } #custom_top_nav a:focus, #custom_top_nav a:hover { /*color: var(--navbar-secondaryColor-text);*/ /*background-color: var(--navbar-secondaryColor);*/ text-decoration: underline; } /*Large devices (desktops, less than 1200px)*/ @media (max-width: 1199.98px) { /* #custom_top_nav ul li a { margin-right: 6px; padding-left: 6px; }*/ } /*Medium devices (tablets, less than 992px)*/ @media (max-width: 991.98px) { #custom_top_nav li a { border-top: 1px solid rgba(255,255,255, 0.3); } #custom_top_nav li:first-child a{ border-top: 0; } } /* ========= CURRENT ITEM color for ALL level items ========= */ #custom_top_nav .select a, #custom_top_nav a.current_page, #custom_top_nav a.current_group { color: var(--navbar-secondaryColor-text); background-color: var(--primaryColor); } /* Still BS2 - NAVIGATION COLLAPSED ============================================================================================*/ @media (max-width: 991.98px) { .navbar-custom { min-height: 40px; } #custom_top_nav { text-align: center; /*full navbar alignment */ } #custom_top_nav ul { display: block;} #custom_top_nav ul li { float: none;} #custom_top_nav ul ul { display: block; position: relative; } /* ======= GENERAL NAV items =======*/ #custom_top_nav { line-height: 1.5em;} #custom_top_nav ul { padding: 0px;} /* === FIRST level items === */ #custom_top_nav ul li a { margin-right: 0px; padding: 6px 10px 6px 20px; } #custom_top_nav .nav_lvl_1:first-child a { margin-left: 0px;} #custom_top_nav .nav_lvl_1:last-child a { margin-right: 0px;} }