JSFiddle

by Troy Pilewski

HTML

<script src="https://fonts.googleapis.com/css?family=Gugi|Lato|Raleway|Roboto|Roboto+Condensed"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
  <!-- Start Banner and Navbar -->
  <div class="w3-top">
    <div id="banner" class="w3-hide-small w3-hide-medium">
      <div class="w3-content">
        <div class="w3-row">
          <div class="w3-col m8 l9">
            <!-- Start Sit Collection Breadcrumbs -->
            <ul class="breadcrumb">
              <li><a href="#">Commander, Naval Surface Force, U.S. Pacific Fleet (COMNAVSURFPAC)</a></li>
              <li><a href="#">Commander, Naval Surface Group, Western Pacific (COMNAVSURFGRUWP)</a></li>
              <li><a href="#">Commander, Amphibious Squadron ELEVEN (COMPHIBRON 11)</a></li>
              <li><a href="#">USS Ashland (LSD 48)</a></li>
            </ul>
            <!-- End Sit Collection Breadcrumbs -->
          </div>
          <div class="w3-col m4 l3">
            <!-- Start Social Media Links -->
            <ul class="social">
              <li>Follow Us On:</li>
              <li><a href="#" title="Follow Us On Facebook"><i class="fab fa-facebook-square"></i></a></li>
              <li><a href="#" title="Follow Us On Twitter"><i class="fab fa-twitter-square"></i></a></li>
              <li><a href="#" title="Follow Us On Flickr"><i class="fab fa-flickr"></i></a></li>
              <li><a href="#" title="Follow Us On Wordpress"><i class="fab fa-wordpress"></i></a></li>
              <li><a href="#" title="Follow Us On Youtube"><i class="fab fa-youtube-square"></i></a></li>
            </ul>
            <!-- End Social Media Links -->
          </div>
        </div>
        <div class="w3-row">
          <!-- Start Site Logo -->
          <h1 id="logo">
            <a class="gbl-logo" href="#" title="Commander, Naval Surface Force, U.S. Pacific Home Page">
          ...

CSS

body {
  font-family: 'Roboto', sans-serif;
  /* font-family: 'Roboto Condensed', sans-serif; 
  background: #C6CCD0;*/
}

.w3-content {
  max-width: 1200px;
}

#banner {
  background-color: #022a3a;
}

ul.breadcrumb {
  padding: 2.5px 4px;
  list-style: none;
  background-color: transparent;
  display: inline-block;
  line-height: 0.85;
}

ul.breadcrumb li {
  display: inline;
  font-size: 10px;
}

ul.breadcrumb li::before {
  padding: 4px;
  color: #fffef9;
  /* content: "/\00a0"; */
  content: ">";
}

ul.breadcrumb li a {
  color: #fffef9;
  text-decoration: none;
}

ul.breadcrumb li a:hover {
  color: #e8b00f;
  font-weight: 900;
  text-decoration: underline;
}

ul.social {
  padding: 5px 8px;
  list-style: none;
  background-color: transparent;
}

ul.social li {
  color: #fffef9;
  display: inline;
  font-size: 16px;
}

ul.social li::before {
  padding: 4px;
  color: #fffef9;
  /* content: "/\00a0"; */
}

ul.social li a {
  color: #fffef9;
  text-decoration: none;
}

ul.social li a:hover {
  color: #e8b00f;
  text-decoration: underline;
}

#logo {
  float: left;
  margin: 0 0 0 25px;
}

.gbl-logo {
  display: inline-block;
  height: 78px;
  width: 180px;
  outline: none;
  background: transparent url("http://www.navy.mil/imgs/americas-navy-globe.png") no-repeat 0 0;
  cursor: pointer;
  /* text-indent: -9000px; */
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#___gcse_0 {
  float: right;
  width: 75%;
}

.gsc-control-cse {
  /* font-family: Arial, sans-serif; */
  border-color: #022a3a !important;
  background-color: #022a3a !important;
}

.gsc-search-button-v2,
.gsc-search-button-v2:focus {
  border-color: #C6CCD0 !important;
  background-color: #0076a9 !important;
  background-image: none;
  filter: none;
}

.gsc-search-button-v2:hover {
  border-color: #C6CCD0 !important;
  background-color: #e8b00f !important;
  background-image: none;
  filter: none;
}

#navbar {
  height: 38.5px;
}

.loc-logo {
  width: 100px;
  /* height: 125px;...