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
Columbia University in the City of New York
 
 
<script src="https://code.jquery.com/jquery-3.6.1.min.js "></script>
<div class="search-widget-btn">
<header>
<section class="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-9 col-lg-9">
<div class="university-content"><a href="https://www.columbia.edu/">Columbia University in the City of New York</a></div>
</div>

<div class="col-lg-3"><button id="search-icon-wrapper"></button>

<div class="search-icon">&nbsp;</div>
<button id="search-icon-wrapper"><span class="sr-only">Toggle search</span></button></div>
</div>

<div class="row">
<div class="col-sm-8">
<div id="brand-wrapper-inner">
<div class="with-logo" id="branded-site-name">
<div id="site-name"><a href="/"><img alt="" class="img-fluid" data-entity-type="" data-entity-uuid="" height="38 " src="https://provost.columbia.edu/sites/default/files/logo/Provost.png" width="550 " /> <span class="sr-only ">Office of the Provost</span> </a></div>
</div>
</div>
</div>
</div>
</div>
</section>

<div id="search-widget-wrapper">
<div class="container">
<div id="search-widget">
<form>
<div class="form-group">
<div class="icon">&nbsp;</div>
<input class="form-control" id="site-search-keywords" placeholder="Search the site" type="text" /></div>
</form>
</div>
</div>
</div>
</header>
</div>