Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html#standard-navigation
Please note, this component is not designed to be used standalone, but along with a site-navigation as part of your page’s <header> section.
<!-- Top Header -->
<div id="top-header">
<div class="top-header-left">
<a title="UTSA Home" href="https://www.utsa.edu">
<img width="250px" height="12px" class="logo-full d-none d-sm-block" src="../../college-dls/utsa/images/utsa-logo-full.svg" alt="The University of Texas at San Antonio" />
<img width="72px" height="25px" class="logo-short d-block d-sm-none" src="../../college-dls/utsa/images/utsa-logo.svg" alt="The University of Texas at San Antonio" />
</a>
</div>
<div class="top-header-right">
<form class="top-header-form">
<div class="language-select">
<label for="select-lang" class="d-none">Select Language</label>
<select id="select-lang" class="js-example-disabled-results" aria-labelledby="select-lang">
<option>Select Language</option>
<option>English</option>
</select>
</div>
<div class="myutsa-link">
<a title="MyUTSA" href="https://my.utsa.edu"><i class="fas fa-globe-americas"></i> <span class="myutsa-text">myUTSA</span></a>
</div>
<div class="search">
<button type="button" class="search-btn dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true">
<span class="search-icon"><i class="fas fa-search" aria-hidden="true"></i></span>
<span class="search-text">Search</span>
</button>
<div class="dropdown-menu " style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(274px, 122px, 0px);" data-popper-placement="bottom-end">
<label for="q" class="d-none">Search</label>
<input type="search" placeholder="Search" id="q" tabindex="0" onblur="if (this.value == '') {this.value = 'Search UTSA';}" onfocus="if (this.value == 'Search UTSA') {this.value = '';}" value="Search UTSA" />
<button type="submit" class="search-input-icon" aria-label="Search"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
<!-- End Top Header -->
/* components/01-visual-styling/01-branding-standards/04-global-header/global-header.scss */
/* BEGIN global-header.scss */
/* Skip Button Functionality */
// load and make available Font Awesome helpers (mixins, functions, and variables)
@use '../../node_modules/@fortawesome/fontawesome-pro/scss/fa' as fa;
a.Skip-btn {
opacity: 0;
}
a.Skip-btn:focus {
opacity: 1;
}
#skip-content {
overflow: hidden;
left: -100000px;
position: absolute;
height: 0;
width: 0;
}
#skip-content.active {
position: absolute !important;
left: 0px !important;
top: 0px !important;
overflow: auto !important;
height: auto !important;
width: auto !important;
}
a.Skip-btn {
background-color: $orange-a11y !important;
border: none;
color: $white !important;
padding: 10px 15px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
}
#header .top-header {
background-color: $blue;
}
#top-header {
padding-left: 15px;
padding-right: 15px;
border-bottom: 4px solid $orange;
padding-top: 1px;
padding-bottom: 4px;
background-color: $blue;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
.top-header-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.top-header-left img.logo-full {
width: 250px!important;
height: 12px!important;
max-width: 250px;
}
.top-header-left img.logo-short {
width: 72px!important;
height: 25px!important;
max-width: 72px;
}
&.affiliate .top-header-left img.logo-full {
width: 250px!important;
height: 32px!important;
max-width: 250px;
}
&.affiliate .top-header-left img.logo-short {
width: 72px!important;
height: 35px!important;
max-width: 72px;
}
.top-header-left {
position: relative;
top: 2px;
}
.language-select>select {
font-size: 12px;
height: 18px;
}
.language-select {
padding-right: 15px;
}
.myutsa-link {
padding-right: 15px;
}
.myutsa-link a {
color: $white;
font-size: 13px;
font-weight: 300;
}
.myutsa-link i,
.myutsa-link svg {
vertical-align: middle;
}
.myutsa-text {
font-size: 13px;
font-weight: 300;
}
.myutsa-link .icon {
vertical-align: middle;
}
.search-btn {
background-color: transparent;
border: none;
color: $white;
font-size: 13px;
font-weight: 300;
padding: 0px;
}
.search-btn::after {
display: none;
}
.search {
.dropdown-menu {
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
background-color: transparent !important;
border: none !important;
}
.dropdown-menu {
width: 100%;
max-width: 1200px;
margin-left: auto !important;
margin-right: auto !important;
left: 0 !important;
right: 0 !important;
top: 18px !important;
padding: 0px 15px !important;
}
.dropdown-menu input {
width: 100%;
border: none;
padding: 10px 50px 10px 15px;
}
.dropdown-menu .search-input-icon {
background-color: $orange-a11y;
color: $white;
padding: 10px 15px;
position: absolute;
right: 15px;
border: none;
}
.dropdown-menu.show {
display: none;
}
}
@include media-breakpoint-down(lg) {
.myutsa-text {
display: none;
}
}
}
#header.search-bar-active {
padding-top: 72px;
.search .dropdown-menu {
display: block !important;
}
}
@include media-breakpoint-down(lg) {
.search .dropdown-menu input {
padding: 6px 30px 6px 15px;
}
.search .dropdown-menu .search-input-icon {
padding: 6px 15px 6px 15px;
}
.language-select>select {
font-size: 10px;
}
}
/* BEGIN rebrand stuff */
// + Brand Colors
$midnight: #032044;
$utsa-orange: #F15A22;
$utsa-orange-a11y: #d3430d;
$talavera-blue: #265bf7;
$river-mist: #c8dcff;
$anti-flash: #edeff2;
$platinum: #dce0e6;
$french-gray: #b4bdc7;
// + Colors
$utsa-blue: $midnight;
$orange-a11y: $utsa-orange-a11y;
$white: #fff;
$black: #000;
// + Blues
$blue-highlight: $talavera-blue;
$blue-02: $french-gray;
// + Grays
$gray-00: $anti-flash;
$gray-01: $platinum;
$gray-03: $french-gray;
$gray-05: #232323;
$gray-f6: #f6f6f6;
// ++ Weights
$normal: 400;
// $med: 500;
$bold: 700;
// $black-weight: 900;
.top-bar {
background-color: $utsa-blue;
color: $white;
padding: 0 1.5rem;
height: 2.4444444444rem;
// border-bottom: 4px solid $utsa-orange;
width: 100%;
align-content: center;
font-size: rem-calc(15);
@include media-breakpoint-down(lg) {
font-size: rem-calc(12.5);
}
@include media-breakpoint-down(sm) {
font-size: rem-calc(11.6667);
}
.col-4 {
line-height: 1;
a {
padding-top: rem-calc(3);
}
}
.row {
// height: 50px;
height: rem-calc(44);
@include media-breakpoint-down(lg) {
height: rem-calc(36);
}
@include media-breakpoint-down(sm) {
height: rem-calc(34.2);
}
}
ul {
margin: 0;
padding: 0;
text-align: right;
justify-content: flex-end;
display: flex;
gap: 1rem;
white-space: nowrap;
li {
margin: 0;
display: inline-block;
border-left: 1px solid $blue-light;
padding-left: 1rem;
line-height: 1;
&:first-child {
border-left-width: 0;
padding-left: 0;
}
a {
color: $white;
display: block;
padding: 0;
// font-size: rem-calc(15);
font-weight: $normal;
text-decoration: none;
border-bottom: 1px solid transparent;
outline: none;
transition: border-color 0.3s ease;
&:hover {
color: $grey;
background-color: transparent;
border-color: $white;
text-decoration: none;
}
&:focus {
text-decoration: none;
background-color: transparent;
border-color: $orange;
}
&.global-search {
text-decoration: none;
&:focus {
text-decoration: none;
border-color: $orange;
}
}
}
}
}
// Topbar Logo
.tb-logo {
display: inline-block;
&:hover,
&:focus,
&:focus-visible {
outline: 0px solid transparent;
color: $blue;
background-color: $grey;
text-decoration: none;
border-bottom: 1px solid $orange-a11y;
>img {
filter: invert(1);
}
}
img {
height: 1.25rem;
width: auto;
@include media-breakpoint-down(lg) {
height: rem-calc(16.6625);
}
}
}
}
// Selection
::selection {
background-color: $orange-a11y;
color: $white;
}
.global-searchbar {
background-color: $utsa-blue;
float: left;
opacity: 1.0;
visibility: hidden;
width: 100%;
height: 0;
&.active {
padding: 2rem 1rem;
visibility: visible;
transform: translate(0);
float: none;
height: auto;
opacity: 1;
}
input {
padding: 0.45rem 0.75rem;
margin: 0rem 1rem 0 0;
}
.btn {
margin: 1.5rem 1rem 0 0;
font-weight: $bold;
max-width: 100%;
min-width: 90%;
&-search {
font-size: rem-calc(18);
width: 100%;
--bs-btn-border-radius: 0.1875rem;
&:before {
content: fa.fa-content(fa.$var-magnifying-glass);
font-family: fa.$family;
display: block;
}
}
}
}
//Toggle
.global-search {
&.active {
.fas.fa-search:before {
content: "\f00d";
}
}
}
.searchbar {
.searchfield {
border: 1px solid $gray-01;
border-radius: $btn-border-radius;
width: 100%;
padding: 0.5rem 1rem;
}
}
/* END rebrand stuff */
/* END global-header.scss */
<!-- Top Header -->
<div id="top-header">
<div class="top-header-left">
<a title="UTSA Home" href="https://www.utsa.edu">
<img width="250px" height="12px" class="logo-full d-none d-sm-block" src="{{path '/college-dls/utsa/images/utsa-logo-full.svg'}}" alt="The University of Texas at San Antonio" />
<img width="72px" height="25px" class="logo-short d-block d-sm-none" src="{{path '/college-dls/utsa/images/utsa-logo.svg'}}" alt="The University of Texas at San Antonio" />
</a>
</div>
<div class="top-header-right">
<form class="top-header-form">
<div class="language-select">
<label for="select-lang" class="d-none">Select Language</label>
<select id="select-lang" class="js-example-disabled-results" aria-labelledby="select-lang">
<option>Select Language</option>
<option>English</option>
</select>
</div>
<div class="myutsa-link">
<a title="MyUTSA" href="https://my.utsa.edu"><i class="fas fa-globe-americas"></i> <span class="myutsa-text">myUTSA</span></a>
</div>
<div class="search">
<button type="button" class="search-btn dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true">
<span class="search-icon"><i class="fas fa-search" aria-hidden="true"></i></span>
<span class="search-text">Search</span>
</button>
<div class="dropdown-menu " style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(274px, 122px, 0px);" data-popper-placement="bottom-end">
<label for="q" class="d-none">Search</label>
<input type="search" placeholder="Search" id="q" tabindex="0" onblur="if (this.value == '') {this.value = 'Search UTSA';}" onfocus="if (this.value == 'Search UTSA') {this.value = '';}" value="Search UTSA" />
<button type="submit" class="search-input-icon" aria-label="Search"><i class="fas fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
<!-- End Top Header -->