CSS-Only Responsive CSU Header

Background

CSU’s brand guidelines require that our websites have a responsive header. For large screens, the CSU signature should be written out on one line (Colorado State University); on medium screens, the CSU signature should be written on two lines (Colorado State–University); on small screens, the CSU signature should be shortened to our initials (CSU).

Prior Solution Used

A centralized solution was offered that worked but relied on the use of Javascript. This would lead to occasional flickering as the DOM was modified during page loads as well as caching issues for logged-in users.

While this isn’t an ideal method to solve the problem, it was the only universal method that could be handed out to any and all CSU web developers and have it work. It served us well but we eventually decided to create our own CSS-only solution.

CSS-Only Solution

HTML

            <div class="responsive-logo-container">
    <div class="csu-border-right">
        <a href="https://www.colostate.edu" class="csu-signature"><span class="sr-only">Colorado State University</span></a>
    </div>
    <div>
        <a href="/" class="site-identifier">Site Identifier</a>
    </div>
</div>
        

The second-level of DIVs is to allow for proper placement of the 2px white border between the two halves. If you attempt to place the border property of either of the A tags directly, margin can't be used to achieve the required spacing (as margin comes after the border) and padding can't be used as it'll extend the clickable area of the link beyond the desired space.

CSS

            .responsive-logo-container {
  display: flex;
  align-items: center;
  padding: 15px;
}
.responsive-logo-container > * {
  display: flex;
  align-items: center;
}
.responsive-logo-container > .csu-border-right {
  border-right: 2px solid #ffffff;
}
.responsive-logo-container .csu-signature {
  display: inline-block;
  background: url(./assets/signature-oneline.svg) no-repeat center center;
  min-height: 43px;
  width: 356px;
  margin-right: 15px;
}
.responsive-logo-container .site-identifier {
  font-family: 'prox-light', sans-serif !important;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  margin-left: 15px;
  color: #ffffff;
}
@media only screen and (max-width: 1120px) {
  .responsive-logo-container .csu-signature {
    background: url(./assets/signature-stacked.svg) no-repeat center center;
    width: 175px;
  }
}
@media only screen and (max-width: 640px) {
  .responsive-logo-container .csu-signature {
    background: url(./assets/signature-acronym.svg) no-repeat center center;
    width: 115px;
  }
}
        

Because we have to use a second-level of DIVs (explained above), we have to apply "display: flex" for both level of DIVs to keep things inline and vertically centered.