Brand Bar and Header
The Brand Bar is the section at the top of official University websites that includes five key elements: a link to the University homepage, a University logo, utility navigation, search, and main navigation. The Brand Bar must conform to University Identity Guidelines.
Usage
The Brand Bar creates a consistent user experience across Columbia's digital ecosystem by:
- Conferring the imprimatur of the University through a brand-compliant logo (lockup)
- Adding a centrally supported interface that is updated regularly
- Conveying the University’s reputation and prestige on each unit
- Building a sense of community and University pride
<style type="text/css">
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.header {
display: grid;
position: relative;
}
.header * {
box-sizing: border-box;
}
.header a {
text-decoration: none;
}
.header a:hover {
text-decoration: underline;
}
.header.open .search-widget {
height: 75px;
padding: 15px;
}
.header.open .search-icon-wrapper {
background: #f2f2f2;
}
.header.open .search-icon-wrapper span:nth-child(1) {
height: 100%;
width: 100%;
left: 1px;
top: -1px;
opacity: 0;
}
.header.open .search-icon-wrapper span:nth-child(2) {
width: 18px;
right: 0;
top: calc(50% - 1px);
transform: rotate(-45deg);
}
.header.open .search-icon-wrapper span:nth-child(3) {
width: 18px;
right: 0;
top: calc(50% - 1px);
transform: rotate(-135deg);
}
.rooftop {
align-items: center;
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.rooftop a {
color: #24598c;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.branding-and-utility {
display: flex;
gap: 15px;
justify-content: space-between;
margin: 30px 0;
padding: 0 15px;
}
.utility {
text-align: right;
}
.nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.utility .nav a {
color: #2c6bac;
display: block;
padding: 0 5px;
}
.main-nav .nav a {
font-weight: bold;
font-size: 1.4em;
color: #24598c;
display: block;
padding: 10px 15px;
line-height: 20px;
text-align: left;
}
.main-nav .nav a:hover {
background: #093552 !important;
color: #fff !important;
position: relative;
text-decoration: none;
}
.search-widget {
background: #f2f2f2;
color: #333;
height: 0;
overflow: hidden;
padding: 0 15px;
transition: all 0.6s;
}
.search-widget form {
position: relative;
}
.search-widget button {
background: none;
border: 0;
position: absolute;
right: 5px;
top: -2px;
z-index: 1;
}
.search-widget input {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
border-radius: 2px;
background: #fff;
border: 1px solid #eee;
color: #24598c;
font-size: 20px;
font-weight: 400;
padding: 10px 60px 10px 15px;
position: relative !important;
width: 100%;
}
.search-icon-wrapper {
background: none;
border: 0;
max-width: 48px;
float: right;
position: relative;
height: 100%;
cursor: pointer;
margin: 0 -10px;
padding: 0 15px;
transition: 0.25s ease-in-out;
}
.search-icon {
width: 18px;
height: 18px;
position: relative;
margin: 14px auto;
float: right;
transform: rotate(0deg);
transition: transform 0.5s ease-in-out;
}
.search-icon span {
display: block;
position: absolute;
height: 2px;
width: 100%;
opacity: 1;
left: 0;
transform: rotate(0deg), translate3d(0, 0, 0);
transition: 0.25s ease-in-out;
background: #00294a;
}
.search-icon span:nth-child(1) {
top: -1px;
left: -1px;
height: 100%;
width: 100%;
border-radius: 50%;
border: 3px solid #00294a;
background: none !important;
}
.search-icon span:nth-child(2) {
width: 50%;
height: 3px;
left: auto;
right: -3px;
top: calc(100% - 2px);
border-radius: 5px;
transform: rotate(45deg);
}
.search-icon span:nth-child(3) {
width: 50%;
height: 3px;
left: auto;
right: -3px;
top: calc(100% - 2px);
border-radius: 5px;
transform: rotate(45deg);
}
.search-icon-wrapper .search-icon span {
background: #24598c;
}
.search-icon-wrapper .search-icon span:nth-child(1) {
border: 3px solid #24598c;
}
</style>
<header id="header" class="header">
<div class="search-widget">
<div id="search-widget" aria-hidden="false" style="">
<form>
<div class="form-group">
<button id="search-widget-submit" type="submit" aria-label="Submit keywords">
<div class="search-icon">
<span></span>
<span></span>
<span></span>
</div>
<span class="sr-only">Submit keywords</span>
</button>
<label for="site-search-keywords" class="sr-only">Search the site</label>
<input type="text" id="site-search-keywords" placeholder="Search the site" aria-label="Search the site" autocomplete="off" aria-invalid="false" spellcheck="false" dir="auto">
</div>
</form>
</div>
</div>
<div class="rooftop">
<a href="https://www.columbia.edu/" class="external" target="_blank" rel="noopener">Columbia University in the City of New York</a>
<button id="search-icon-wrapper" aria-expanded="false" class="search-icon-wrapper">
<div class="search-icon">
<span></span>
<span></span>
<span></span>
</div>
<span class="sr-only">Toggle search</span>
</button>
</div>
<div class="branding-and-utility">
<div id="site-name"><a href="/" tabindex="0"><img src="https://provost.columbia.edu/sites/default/files/logo/Provost.png" alt="Office of the Provost logo" class="img-responsive" width="550" height="38"><span class="sr-only">Office of the Provost</span></a></div>
<nav class="utility">
<ul class="nav">
<li><a href="#">Directory</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<nav class="main-nav">
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Offices</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">New & Announcements</a></li>
</ul>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
function toggleSearch() {
$("#header").toggleClass("open");
};
$(document).ready(function () {
$("#search-icon-wrapper").click(function(){
toggleSearch();
});
});
</script>