From 5153c570a0c7ecbaac77746d89360d7a6edfdab9 Mon Sep 17 00:00:00 2001 From: David McKnight Date: Thu, 12 Feb 2026 11:33:06 -0600 Subject: [PATCH] navbar updates --- assets/scss/_content.scss | 163 -------------- assets/scss/_nav.scss | 374 ++++++++++++++++++++++++++++++++ layouts/partials/navbar.html | 401 ++++++++++++++++++++++++++++------- 3 files changed, 694 insertions(+), 244 deletions(-) create mode 100755 assets/scss/_nav.scss diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss index 221ddb4e95..8afa573e93 100755 --- a/assets/scss/_content.scss +++ b/assets/scss/_content.scss @@ -4,169 +4,6 @@ Styles to override the theme. */ -.td-navbar { - max-width: 1280px; - background: #132f48; -} - - -.td-navbar .navbar-brand svg { - margin: -8px 10px 0; -} - -li.nav-item { - margin-bottom: 0; -} - -.navbar-dark .navbar-nav .nav-link, -.navbar-dark .navbar-nav .nav-link:hover, -.navbar-dark .navbar-nav .nav-link:focus { - color: #fff; - line-height: 65px; - margin-bottom: 0; - padding: 0 10px; -} - -.dropdown-toggle::after { - position: relative; - /* top: 3pt; Uncomment this to lower the icons as requested in comments*/ - content: ""; - display: inline-block; - /* By using an em scale, the arrows will size with the font */ - width: 0.5em; - height: 0.5em; - border-top: 0 none; - border-left: 0 none; - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; - transform: rotate(45deg); - margin-left: 0.5rem -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 16em; - padding: 0 0 1rem; - margin: 0; - font-size: 1rem; - color: #fff; - text-align: left; - list-style: none; - background-color: rgba(19, 47, 72, 0.9); - background-clip: padding-box; - border: 0px solid transparent; - border-radius: 0; - box-shadow: none; - backdrop-filter: blur(4px); -} - -.dropdown-item, -.dropdown-item:hover, -.dropdown-item:focus { - display: block; - width: 100%; - padding: 0.5rem 1.5rem; - clear: both; - font-weight: 400; - color: #fff; - text-align: inherit; - white-space: nowrap; - background-color: transparent; - border: 0; -} -.dropdown-item:hover, -.dropdown-item:focus { - text-decoration:underline; - background: transparent; -} - -.dropdown-menu[data-bs-popper]{ - margin-top: 0; -} - -@media (max-width: 992px) { - .navbar-nav .nav-item{ - display:none; - } -} - -.header-social-wrap a { - text-decoration: none; -} - -@media (min-width: 992px) { - body>header { - position: fixed; - top: 0; - width: 100%; - background: rgba(19, 47, 72, 0.9); - z-index:1000; - min-height: 65px; - backdrop-filter: blur(4px); - } - .td-navbar { - position:relative; - margin: 0 auto; - padding-left: 5px; - padding-right: 5px; - background:transparent; - min-height: 65px; - padding-top:0; - padding-bottom:0; - } - .td-navbar-nav-scroll{ - width: 100%; - } - - .td-navbar .navbar-brand svg { - width: 30px; - margin: -8px 10px 0 0; - height: auto; - } - .td-navbar .navbar-brand span.font-weight-bold { - display:inline-block; - vertical-align: 1px; - font-size:18px; - } - - .td-sidebar { - padding-top: 75px; - background-color: #e9ecf0; - padding-right: 1rem; - border-right: 1px solid #dee2e6; - } - - .td-sidebar-toc { - border-left: 1px solid $border-color; - - @supports (position: sticky) { - position: sticky; - top: 75px; - height: calc(100vh - 85px); - overflow-y: auto; - } - order: 2; - padding-top: 5px; - padding-bottom: 1.5rem; - vertical-align: top; - } - - - .header-social-wrap { - height: 65px; - display: flex; - margin-left: auto; - align-items: center; - margin-bottom: 0; - } -} - - footer.bg-dark { diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss new file mode 100755 index 0000000000..add3b5c29c --- /dev/null +++ b/assets/scss/_nav.scss @@ -0,0 +1,374 @@ +// +// Main navbar +// + +.navbar { + max-width: 1280px; + background: #020a2b; + color: #fff; + margin: 0 auto; + padding: .5rem 1rem; +} + +li.nav-item { + margin-bottom: 0; +} + +.navbar-dark .navbar-nav .nav-link, +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { + color: #fff; + font-size: 17px; + font-weight: 700; + line-height: 65px; + margin-bottom: 0; + padding: 0 10px; +} + +.dropdown-toggle::after { + display: inline-block !important; + border: 0 none; + margin: 0 0 2px 6px; + width: 15px !important; + height: 9px; + background: url('data:image/svg+xml,') center center no-repeat transparent !important; + background-size: contain !important; + vertical-align:middle; +} + +.dropdown-menu { + top: 60px; + width: 100%; + z-index: 1000; + display: none; + min-width: 16em; + padding: 0 0 1rem; + margin: 0 auto; + font-size: 1rem; + color: #fff; + text-align: left; + list-style-type: none; + background: transparent; + border-radius: 0 0 8px 8px; + box-shadow: none; + background-color: #020a2b; + max-width: 1280px; + left: 50%; + transform: translateX(-50%); +} + +header .dropdown:hover > .dropdown-menu { + display: block; + margin-top: 0; /* Aligns the menu right under the button without a gap */ +} + +.mega-sub-menu { + list-style-type: none; +} + +.dropdown-menu > .container { + margin: 0 auto; + max-width: 1280px; +} + + +.dropdown-item, +.dropdown-item:hover, +.dropdown-item:focus { + display: block; + width: 100%; + padding: 0.5rem 1.5rem; + clear: both; + font-weight: 400; + color: #fff; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; +} + +.dropdown-item:hover, +.dropdown-item:focus { + text-decoration:underline; + background: transparent; +} + +.navbar-button, .navbar-button:hover { + margin: 0 5px; + display:inline-block; + border-radius: 15px; + padding: 4px 13px; + background-color: #1e9dcf; + color: white; + font-size: 13px; + line-height: 17px; + font-weight: 700; + text-decoration:none; +} + +.header-social-wrap { + display: flex; + margin: auto 0 auto auto !important; + align-items: center; +} + + +.header-social-item { + display:inline-flex; + align-items: center; + justify-content: center; + color: white; + opacity: 0.8; + width: 44px; + height: 44px; + padding: 0 11px; + margin: auto 0; +} + +.header-social-item:hover { + color: white; + opacity: 1; +} + +.header-social-item svg { + max-width:22px; +} + +@media (min-width: 1200px) { + body>header { + position: fixed; + top: 0; + width: 100%; + background: #020a2b; + z-index:1000; + min-height: 65px; + backdrop-filter: blur(4px); + } + .navbar { + position:relative; + margin: 0 auto; + padding-left: 5px; + padding-right: 5px; + background:transparent; + min-height: 65px; + padding-top:0; + padding-bottom:0; + } + + .navbar .navbar-brand { + padding: 0; + margin: 0; + width: 150px; + flex-shrink: 0; + margin-right:20px + } + + .td-sidebar { + padding-top: 75px; + background-color: #e9ecf0; + padding-right: 1rem; + border-right: 1px solid #dee2e6; + } + + .td-sidebar-toc { + border-left: 1px solid $border-color; + + @supports (position: sticky) { + position: sticky; + top: 75px; + height: calc(100vh - 85px); + overflow-y: auto; + } + order: 2; + padding-top: 5px; + padding-bottom: 1.5rem; + vertical-align: top; + } + + #mobile_navbar { + display: none !important; + } + + +} + +#mobile_navbar { + position:fixed; + inset: 60px 0 0 32px; + background: #020a2b; + z-index: 100000; + overflow-y: auto; + padding-bottom: 100px; +} + + +#mobile_navbar ul{ + list-stye-type: none; + display:block; + padding-left: 14px; + margin-left: 0; + position:relative; +} + +#mobile_navbar .nav-item { + list-stye-type: none; + display:block; + padding-left: 0; + margin-left: 0; + position:relative; +} + +#mobile_navbar a { + font-size: 14px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + display: block; + padding: 14px 7px; + color: white; + opacity: 0.8; +} + +#mobile_navbar a:hover { + opacity: 1; +} + +#mobile_navbar .has-collapse-sub-nav .nav-item-has-children>.sub-menu { + display: none; +} + +#mobile_navbar .has-collapse-sub-nav .nav-item-has-children.active>.sub-menu { + display: block; +} + +.mobile-drop-toggle { +display: block; +position: absolute; +right: 0; +top: 0; +width: 50px; +height: 50px; +background: url('data:image/svg+xml,') center center no-repeat transparent; +background-size: 15px; +border-left: 1px solid rgba(255,255,255,0.1); +cursor:pointer; +} + +.nav-item-has-children.active >.drawer-nav-drop-wrap .mobile-drop-toggle { + transform: rotate(-180deg); +} + + +// MEGA MENUS + +.mega-menu { + letter-spacing: 0.5px !important; + color: #fff; + line-height: 1.3; + + h2, + h3, + h4, + h5 { + color: #fff; + padding-bottom: 0.5rem; + font-weight: 700; + } + + p { + margin-top: 0; + } + + a { + display: inline-block; + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 17px; + line-height: 150%; + } + + a:hover { + color: #fff; + text-decoration: underline; + } + + p.col-header { + margin: 0 -20px 15px -30px; + padding: 0 20px 10px 30px; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + font-size: 1.2rem; + } + + .desc, + .desc a { + font-size: 14px; + font-weight: 300; + line-height: 1.3; + } + + .desc { + opacity: 0.8; + padding-bottom: 5px; + } + + .sub_links { + margin-top: 10px; + } + + .small-links a { + font-size: 15px; + } + + .mega-bg-blue { + background: rgba(75, 156, 193, .35) !important; + } + + .grid-row { + display: grid; + grid-auto-columns: minmax(0, 1fr); + grid-auto-flow: column; + } + + .grid-row>div { + padding: 20px 20px 20px 30px; + } + + .navicon-item { + margin-bottom: 20px; + padding-left: 55px; + background-repeat: no-repeat; + background-position: 0 2px; + } + + .icon-item:last-child { + margin-bottom: 0; + } + + .sub-section-header { + margin-left: -10px; + padding: 5px 5px 5px 10px; + margin-bottom: 10px; + background: rgba(24, 157, 208, 0.15); + border-radius: 8px; + font-size: 20px; + color: #fff; + } + + .med-link { + font-size: 16px; + } + + .mega-menu-column .button { + font-size: 16px; + font-weight: 400; + min-width: 150px; + display: inline-block; + text-align: center; + } + + .slack-button { + background: #7B00A0 !important; + } + +} + + diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 28137d16e3..413dc62687 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -1,91 +1,330 @@ {{ $cover := and (.HasShortcode "blocks/cover") (not .Site.Params.ui.navbar_translucent_over_cover_disable) }} - + \ No newline at end of file