A header bar used for displaying the TCU brand, search, and menu button. Global header is used on every academic/non-academic TCU website.
<style>
:root {
--color-primary-gradient: linear-gradient(90deg, #3c145f, #6a23a7), #3c145f
}
.show-for-sr,
.tcu-visuallyhidden {
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
white-space: nowrap !important
}
@font-face {
font-display: swap;
font-family: montserrat;
font-style: normal;
font-weight: 900;
src: url(https://assets.tcu.edu/fonts/Montserrat-Black.woff2) format("woff2"), url(https://assets.tcu.edu/fonts/Montserrat-Black.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: montserrat;
font-style: normal;
font-weight: 700;
src: url(https://assets.tcu.edu/fonts/Montserrat-ExtraBold.woff2) format("woff2"), url(https://assets.tcu.edu/fonts/Montserrat-ExtraBold.woff) format("woff")
}
@font-face {
font-display: swap;
font-family: montserrat;
font-style: normal;
font-weight: 500;
src: url(https://assets.tcu.edu/fonts/Montserrat-Medium.woff2) format("woff2"), url(https://assets.tcu.edu/fonts/Montserrat-Medium.woff) format("woff")
}
@supports (font-variation-settings:normal) {
@font-face {
font-display: swap;
font-family: montserrat;
font-stretch: 25% 151%;
font-weight: 100 900;
src: url(https://assets.tcu.edu/fonts/Montserrat-VariableFont_wght.woff2) format("woff2 supports variations"), url(https://assets.tcu.edu/fonts/Montserrat-VariableFont_wght.woff2) format("woff2-variations")
}
}
body {
-webkit-margin-before: 3rem;
margin-block-start: 3rem
}
@media print,
screen and (min-width:64em) {
body {
-webkit-margin-before: 3.5rem;
margin-block-start: 3.5rem
}
}
:target {
scroll-margin-block: 3.5rem
}
.tcu-header {
color: #fff;
font-family: montserrat, Lucida Grande, Verdana, sans-serif;
height: 3rem;
left: 0;
opacity: 1;
position: fixed;
right: 0;
top: 0;
z-index: 10
}
@media print,
screen and (min-width:64em) {
.tcu-header {
height: 3.5rem
}
}
.tcu-header a,
.tcu-header button {
color: #fff
}
.tcu-header button {
background: transparent;
border: 0
}
.tcu-header__logo {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
-webkit-padding-start: 1.6rem;
padding-inline-start: 1.6rem;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
.tcu-header__logo,
.tcu-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.tcu-logo {
text-decoration: none
}
.tcu-logo svg {
forced-color-adjust: preserve-parent-color;
height: clamp(1.55rem, 1.1406976744rem + 1.0658914729vw, 2.1rem);
-webkit-transition: height .45s ease-in;
transition: height .45s ease-in;
width: clamp(3.2rem, 2.3441860465rem + 2.2286821705vw, 4.35rem);
fill: currentColor
}
.tcu-logo .tcu-logo__label {
display: none;
font-size: .7rem;
font-style: normal;
font-weight: 800;
letter-spacing: 2.8px;
line-height: normal;
text-transform: uppercase;
-webkit-padding-start: clamp(.9rem, -.0302325581rem + 2.4224806202vw, 2.15rem);
padding-inline-start: clamp(.9rem, -.0302325581rem + 2.4224806202vw, 2.15rem)
}
@media print,
screen and (min-width:48em) {
.tcu-logo .tcu-logo__label {
display: block
}
}
@media print,
screen and (min-width:64em) {
.tcu-logo .tcu-logo__label {
font-size: .8rem;
letter-spacing: .16rem
}
}
.tcu-header__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-inline: auto;
position: relative;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
background: -webkit-gradient(linear, left top, right top, from(#3c145f), to(#6a23a7)), #3c145f;
background: linear-gradient(90deg, #3c145f, #6a23a7), #3c145f;
justify-content: space-between;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
._is-active .tcu-header__content {
background: transparent
}
.tcu-header__nav {
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-pack: end;
-ms-flex-pack: end;
font-size: .8rem;
justify-content: flex-end;
text-transform: uppercase
}
.tcu-header__nav,
.tcu-search__button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.tcu-search__button {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: .4rem;
padding-inline: 16px
}
@media print,
screen and (min-width:64em) {
.tcu-search__button {
padding-inline: 1.2rem
}
}
.tcu-header__label {
display: none;
text-transform: uppercase
}
@media print,
screen and (min-width:64em) {
.tcu-header__label {
display: block
}
}
.tcu-burger-menu,
.tcu-search__button {
cursor: pointer;
height: 3rem;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
@media print,
screen and (min-width:64em) {
.tcu-burger-menu,
.tcu-search__button {
height: 3.5rem
}
}
@media (forced-colors:active) {
.tcu-burger-menu:hover,
.tcu-search__button:hover {
color: ButtonText;
text-decoration: underline
}
}
.tcu-burger-menu {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-preferred-size: auto;
border: 0;
flex-basis: auto;
-webkit-padding-start: .8rem;
padding-inline-start: .8rem;
-webkit-padding-end: 1.6rem;
padding-inline-end: 1.6rem
}
.tcu-burger-menu .tcu-burger-menu__toggle-label {
display: none;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-margin-start: 8px;
margin-inline-start: 8px
}
@media print,
screen and (min-width:64em) {
.tcu-burger-menu .tcu-burger-menu__toggle-label {
display: block
}
}
.tcu-burger-menu__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 3rem;
position: relative;
width: 2rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
@media print,
screen and (min-width:64em) {
.tcu-burger-menu__box {
height: 3.5rem
}
}
.tcu-burger-menu__box-inner {
display: block;
position: relative;
top: 50%;
-webkit-transition: width .2s ease, -webkit-transform .4s ease;
transition: width .2s ease, -webkit-transform .4s ease;
transition: width .2s ease, transform .4s ease;
transition: width .2s ease, transform .4s ease, -webkit-transform .4s ease;
width: 1rem
}
.tcu-burger-menu__box-inner,
.tcu-burger-menu__box-inner:after,
.tcu-burger-menu__box-inner:before {
background-color: currentColor;
border-radius: .2rem;
content: "";
display: block;
forced-color-adjust: preserve-parent-color;
height: .1rem
}
.tcu-burger-menu__box-inner:after,
.tcu-burger-menu__box-inner:before {
position: absolute;
-webkit-transition: top .4s ease, bottom .4s ease, opacity .2s ease, -webkit-transform .4s ease;
transition: top .4s ease, bottom .4s ease, opacity .2s ease, -webkit-transform .4s ease;
transition: top .4s ease, bottom .4s ease, transform .4s ease, opacity .2s ease;
transition: top .4s ease, bottom .4s ease, transform .4s ease, opacity .2s ease, -webkit-transform .4s ease;
width: 1.5rem
}
.tcu-burger-menu__box-inner:before {
top: -.4rem
}
.tcu-burger-menu__box-inner:after {
bottom: -.4rem
}
.tcu-burger-menu__box._is-active .tcu-burger-menu__box-inner {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
width: 1.5rem
}
.tcu-burger-menu__box._is-active .tcu-burger-menu__box-inner:before {
opacity: 0;
top: 0
}
.tcu-burger-menu__box._is-active .tcu-burger-menu__box-inner:after {
bottom: 0;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.tcu-header._is-active {
background: #6a23a7;
padding: 0
}
@media print,
screen and (min-width:64em) {
.tcu-header._is-active {
background: transparent
}
}
.tcu-header._is-active .tcu-header__content {
padding: 0
}
.tcu-header._is-active .tcu-header__content:before {
opacity: 0;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.tcu-header._is-active .tcu-header__logo {
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
padding: 0
}
@media print,
screen and (min-width:64em) {
.tcu-header._is-active .tcu-header__logo {
-webkit-box-flex: 4;
-ms-flex: 4;
flex: 4
}
}
@media screen and (min-width:75em) {
.tcu-header._is-active .tcu-header__logo {
-webkit-box-flex: 3;
-ms-flex: 3;
flex: 3
}
}
.tcu-header._is-active .tcu-header__logo a {
text-decoration: none
}
.tcu-header._is-active .tcu-header__logo .tcu-logo__label {
display: none;
text-decoration: none
}
.tcu-header._is-active .tcu-header__nav {
background: #6a23a7;
z-index: 3;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
@media print,
screen and (min-width:64em) {
.tcu-header._is-active .tcu-header__nav {
-webkit-box-flex: 4;
-ms-flex: 4;
flex: 4
}
}
.tcu-header._is-active .tcu-burger-menu {
background: #4d1979;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
@media (forced-colors:active) {
.tcu-header._is-active .tcu-burger-menu:hover {
text-decoration: underline
}
}
.tcu-header._is-active .tcu-search__button {
padding-inline: 24px
}
.tcu-header._is-active .tcu-search__button-label {
display: block;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out
}
</style>
<!-- begin TCU global nav -->
<section class="tcu-header" aria-label="TCU global header">
<div class="tcu-header__content">
<div class="tcu-header__logo">
<a class="tcu-logo" href="https://www.tcu.edu/" aria-label="Go to TCU homepage" rel="nofollow">
<svg id="tcu-header-logo" viewBox='0 0 42 21' alt="">
<path d='M39.315 17.57a.668.668 0 1 1 0 1.336.668.668 0 0 1 0-1.337Zm0 1.477a.8.8 0 0 0 .81-.797.794.794 0 0 0-.81-.798.8.8 0 0 0-.81.798.816.816 0 0 0 .81.797Zm.14-.762c.118 0 .247-.07.247-.246 0-.188-.152-.235-.305-.235h-.375v.903h.129v-.422h.164l.235.422h.152l-.246-.422Zm-.093-.352c.106 0 .2.012.2.117 0 .118-.165.106-.294.106h-.129v-.223h.223ZM12.69.434C6.017 1.326.67 3.683.446 3.777l-.118.058L0 3.988v7.037l.786-.375.27-.13a42.53 42.53 0 0 1 2.662-1.125l.117-.047.364-.13v-2.31c.21-.07.41-.14.598-.21v8.022c-.47.187-.903.375-1.314.55l-.117.048-.328.14v4.798l.797-.388.27-.129a49.174 49.174 0 0 1 6.087-2.44l.13-.034.398-.118v-4.445l-.704.211-.246.07c-.27.083-.551.165-.821.247V5.442c.223-.058.434-.105.633-.152v2.263l.68-.152.235-.059a40.28 40.28 0 0 1 2.416-.48l.164-.024.458-.082V.293l-.622.083-.223.058ZM23.492.281 23.34.13l-.212-.012h-.058A24.274 24.274 0 0 0 20.525 0c-1.29 0-2.3.082-2.51.094h-.059l-.211.012-.152.152-3.073 3.155-.153.164v9.173l.153.164 2.885 3.061.188.2.27-.024.093-.011a31.677 31.677 0 0 1 2.522-.094c.903 0 1.736.035 2.463.105l.082.012.27.035.187-.2 3.014-3.084.153-.164V9.547l-.493-.059-3.037-.34-.61-.07v1.852c-.223.223-.622.622-.856.845a34.685 34.685 0 0 0-1.126-.024c-.505 0-.962.012-1.302.023-.188-.199-.481-.504-.657-.691V5.3c.094-.094.223-.234.364-.375.234-.246.492-.516.656-.68.317-.012.634-.012.939-.012.305 0 .61 0 .891.012.27.258.798.797 1.067 1.067v1.572l.493.047 3.038.305.61.058V3.59l-.153-.164L23.492.28Zm18.192 4.106-.106-.047c-1.513-.75-3.33-1.455-5.383-2.065l-.258-.07-.704-.2v4.446l.375.129c.212.07.493.164.716.234v7.061c-.211.188-.563.48-.798.692-.48-.176-1.36-.516-1.747-.657-.211-.352-.704-1.16-.892-1.478V5.806c.329.082.657.164.68.176l.693.176v-4.41l-.434-.094-.141-.035A53.064 53.064 0 0 0 28.255.55l-.211-.035-.634-.094V4.75l.481.07.164.024h.012c.094.012.281.035.54.082v8.538l.082.13 2.287 3.788.117.188.211.058.07.024c.364.105 2.323.68 4.352 1.688l.117.06.328.163.282-.246 3.859-3.33.187-.165V8.527l.422.21.282.142.797.398V4.563l-.316-.176Z' />
</svg>
<span class="tcu-logo__label">Texas Christian University</span>
</a>
</div>
<div class="tcu-header__nav">
<?php
if (!isset($GLOBALS["hide_search"]) || $GLOBALS["hide_search"] != true) {
// If $GLOBALS['site_scoping'] boolean is set, convert to a string for $site_scoping
// Default to 'true'
$site_scoping = isset($GLOBALS['site_scoping']) ? var_export($GLOBALS['site_scoping'], true) : 'true';
?>
<button class="tcu-search__button" aria-label="Search" data-tcu-search data-type="modal" data-site-scoping="<?php echo $site_scoping; ?>">
<svg focusable="false" width='19' height='20' viewBox='0 0 19 20' fill='none'>
<g stroke='currentColor' stroke-width='2'>
<circle cx='7.199' cy='7.199' r='6.199' />
<path stroke-linecap='round' d='m11.52 12.239 6.48 6.48' />
</g>
</svg>
<span class="tcu-header__label">Search</span>
</button>
<?php } ?>
<?php if (!isset($GLOBALS["hide_nav"]) || $GLOBALS["hide_nav"] != true) { ?>
<button class="tcu-burger-menu" aria-haspopup="true" aria-expanded="false">
<span class="tcu-burger-menu__box">
<span class="tcu-burger-menu__box-inner"></span>
</span>
<span class="show-for-sr">Expand TCU Navigation Menu</span>
<span class="tcu-header__label tcu-burger-menu__toggle-label" aria-hidden="true">Menu</span>
</button>
<?php } ?>
</div>
</div>
</section>
<?php if (!isset($GLOBALS["hide_search_script"]) || $GLOBALS["hide_search_script"] != true) { ?>
<script type="module" crossorigin src="https://assets.tcu.edu/js/search/v1.5.1/main.js"></script>
<?php } ?>
<?php if (!isset($GLOBALS["hide_nav"]) || $GLOBALS["hide_nav"] != true) { ?>
<script>
window.addEventListener('DOMContentLoaded', function() {
(() => {
var burgerBox, navMenuButtons, navigationMenuPanel, headerWrapper = document.querySelector(".tcu-header"),
navInterface = document.querySelector(".tcu-nav"),
burgerMenuButton = document.querySelector(".tcu-burger-menu");
function closeAllDropdownMenus(dropDownButton) {
dropDownButton.forEach(function(button) {
button = button.parentNode.parentNode;
button.querySelectorAll("[aria-expanded]").forEach(function(el) {
return el.setAttribute("aria-expanded", "false")
}), button.querySelectorAll("[aria-hidden]").forEach(function(el) {
return el.setAttribute("aria-hidden", "true")
}), button.querySelectorAll(".show-for-sr").forEach(function(el) {
el.textContent.includes("Contract") && (el.textContent = el.textContent.replace("Contract", "Expand"))
})
})
}
function toggleAriaAttributes(activeButton, menuList, isExpanded) {
activeButton.setAttribute("aria-expanded", isExpanded ? "false" : "true"), menuList && menuList.setAttribute("aria-hidden", isExpanded ? "true" : "false"), isExpanded && !activeButton.classList.contains("tcu-burger-menu") && closeAllDropdownMenus(menuList.querySelectorAll("button"))
}
function updateButtonDescription(buttonDescription, isExpanded) {
buttonDescription && (buttonDescription.textContent = isExpanded ? buttonDescription.textContent.replace("Contract", "Expand") : buttonDescription.textContent.replace("Expand", "Contract"))
}
headerWrapper && navInterface ? (burgerBox = document.querySelector(".tcu-burger-menu__box"), navMenuButtons = document.querySelector(".tcu-nav__main-menu").querySelectorAll("button"), navigationMenuPanel = document.querySelector(".tcu-nav__menu-panel"), closeAllDropdownMenus(navMenuButtons), burgerMenuButton.addEventListener("click", function() {
var isExpanded = "true" === burgerMenuButton.getAttribute("aria-expanded");
isExpanded && (closeAllDropdownMenus(navMenuButtons), navInterface.classList.add("_animation-completed")), toggleAriaAttributes(burgerMenuButton, navInterface, isExpanded), updateButtonDescription(burgerMenuButton.querySelector(".show-for-sr"), isExpanded), headerWrapper.classList.toggle("_is-active"), navInterface.classList.toggle("_is-active"), burgerBox.classList.toggle("_is-active"), document.body.classList.toggle("tcu-nav__is-open"), navigationMenuPanel.scrollTop = 0
}), navMenuButtons.forEach(function(button) {
button.addEventListener("click", function() {
var target, menuItems, buttonDescription, isExpanded;
menuItems = (target = this).parentNode.parentNode.querySelector(".tcu-nav__dropdown-menu"), buttonDescription = target.querySelector(".show-for-sr"), isExpanded = "true" === target.getAttribute("aria-expanded"), toggleAriaAttributes(target, menuItems, isExpanded), updateButtonDescription(buttonDescription, isExpanded)
})
}), document.addEventListener("keydown", function(e) {
var firstFocusableEl, focusableEls;
!document.body.classList.contains("tcu-nav__is-open") || "Tab" !== e.key && 9 !== e.keyCode || 0 === (focusableEls = (() => {
var focusableEls = [];
return [headerWrapper, navInterface].forEach(function(container) {
container.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="search"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])').forEach(function(el) {
null !== el.offsetParent && focusableEls.push(el)
})
}), focusableEls
})()).length || (firstFocusableEl = focusableEls[0], focusableEls = focusableEls[focusableEls.length - 1], e.shiftKey ? document.activeElement === firstFocusableEl && (focusableEls.focus(), e.preventDefault()) : document.activeElement === focusableEls && (firstFocusableEl.focus(), e.preventDefault()))
})) : burgerMenuButton && (burgerMenuButton.style.display = "none")
})();
});
</script>
<?php } ?>
<!-- end of global TCU nav include -->
<?php include_once __DIR__ . '/_alerts.php'; ?>