<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#wb-logo"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 687 180" class="wb-logo"><style type="text/css"> </style><path class="st0" d="M196.3 62.4c-4.6 0-11 6.3-13.2 13.9 0-7.8 0-13.9 0-14.6C172.8 73.9 162 72.3 162 72.3v1.9c1 1.2 6.7-0.4 6.7-0.4v37.6h-6.3v2.2h27.9v-2.2h-7.2c0 0 0-13 0-25.7 1.5-6 5.6-19 11.5-19 0.1 0.1-2.7 4.5-2.7 7.6 0 4.5 2.9 7.6 6.8 7.6 5.8 0 7.1-4.4 7.1-8.6C205.8 68.3 202 62.4 196.3 62.4z"/> <path class="st0" d="M365 62.7c-4.6 0-11 6.3-13.2 13.9 0-7.8 0-13.9 0-14.6 -10.3 12.2-21.1 10.6-21.1 10.6v1.9c1 1.2 6.8-0.4 6.7-0.4v37.6h-6.3v2.2H359v-2.2h-7.2c0 0 0-13 0-25.7 1.5-6 5.6-19 11.5-19 0.1 0.1-2.7 4.5-2.7 7.6 0 4.5 2.9 7.6 6.8 7.6 5.8 0 7.1-4.4 7.1-8.6C374.5 68.6 370.7 62.7 365 62.7z"/> <path class="st0" d="M590.8 62.7c-4.6 0-11 6.3-13.2 13.9 0-7.8 0-13.9 0-14.6 -10.3 12.2-21.1 10.6-21.1 10.6v1.9c1 1.2 6.7-0.4 6.7-0.4v37.6h-6.3v2.2h27.9v-2.2h-7.2c0 0 0-13 0-25.7 1.5-6 5.6-19 11.5-19 0.1 0.1-2.7 4.5-2.7 7.6 0 4.5 2.9 7.6 6.8 7.6 5.8 0 7.1-4.4 7.1-8.6C600.3 68.6 596.5 62.7 590.8 62.7z"/> <path class="st0" d="M420.1 97c-0.8 0-6.2 8.6-12.1 8.6 -4.5 0-13.9-2.4-13.9-10.8l23.5-17.4c0 0-1.3-16.8-17.9-16.8 -14.7 0-21.6 19.2-21.6 29.1 0 13.5 7.6 25.5 20.6 25.5 15.9 0 21.8-17.4 21.8-17.4S420.9 97 420.1 97zM400.1 63.5c6.7 0 6.1 20.2 6.1 20.2l-12.1 8.9C394.1 92.5 391 63.5 400.1 63.5z"/> <path class="st0" d="M552.4 97.4c-0.8 0-6.2 8.6-12.1 8.6 -4.5 0-13.9-2.4-13.9-10.8L550 77.9c0 0-1.3-16.8-17.9-16.8 -14.7 0-21.6 19.2-21.6 29.1 0 13.5 7.6 25.5 20.6 25.5 15.9 0 21.8-17.4 21.8-17.4S553.2 97.4 552.4 97.4zM532.5 63.9c6.7 0 6.1 20.2 6.1 20.2L526.5 93C526.4 92.9 523.4 63.9 532.5 63.9z"/> <path class="st0" d="M259.6 112.5L259 27.1c0-0.2-0.3-0.3-0.4-0.1 -1.1 2.5-6.8 8.9-23.3 8.9v1.5h8.2l0.1 26.4c-2.2-1.2-5-2.2-8.5-2.2 -9 0-24.3 5.9-24.3 29.9 0 12.2 12.2 23.6 23.6 23.6 3.8 0 7-1.1 9.5-2.5l0 10.1c0 0 8.3-8.5 20.9-8.5V112C264.8 112 260.2 111.7 259.6 112.5zM239.3 111.6c-3.8 0-13.2-5.6-13.2-22.5 0-16.9 8.5-25 12.3-25 1.2 0 3.2 0.7 5.2 2.1l0.2 44C242.5 111 241 111.6 239.3 111.6z"/> <path class="st0" d="M133.7 61.5c-13.2 0-21.1 15.3-21.1 26.7s6.2 26.7 21.1 26.7 22.3-14 22.3-26.8S148.8 61.5 133.7 61.5zM133.7 111.7c-2.9 0-5.7-7.9-5.7-23.6s1.9-23.8 5.7-23.8 7.6 9.2 7.6 23.7C141.3 104.5 137.4 111.7 133.7 111.7z"/> <polygon class="st0" points="277.4 38 269.5 38 269.5 36 292.9 36 292.9 114.2 269.5 114.2 269.5 112.2 277.1 112.2 "/> <path class="st0" d="M292.9 36.1c9.4 0 24.7 0.9 24.7 16.2s-13.5 17.1-13.5 17.1 22.5-2.9 22.5 21.1c0 15.6-10.4 23.8-33.7 23.8s0-2.8 0-2.8 18.3 5 18.3-21.8c0-11-2.3-17.4-18.3-17.4 0-0.9 0-2.6 0-2.6s11.7 3.3 11.7-17.1c0-8.1-0.1-14.9-11.7-14.9V36.1z"/> <path class="st0" d="M636.5 64.1v2h7.5l-10.1 27.6 -9.7-27.6h6.9v-2h-28V66h6.8l16.7 48.7c0 0-6.7 19.2-7.5 21.4 -2.2 6-6.6 10.6-9.3 8.8 -0.5-0.3-0.7-1-0.7-2 0-1.2 0.2-2.2 0.8-3.2 0.5-1 0.8-2 0.8-3.1 0-0.8-0.2-1.5-0.5-2 -0.4-0.6-0.7-1-1.2-1.3 -0.5-0.3-1-0.5-1.5-0.6 -0.6-0.1-1-0.2-1.5-0.2 -1.3 0-2.4 0.5-3.3 1.5s-1.4 2.5-1.4 4.4c0 0.7 0.1 1.6 0.3 2.6s0.6 2 1.3 2.9c0.7 0.9 1.6 1.7 2.7 2.4 1.2 0.7 2.7 1.1 4.6 1.1 1.5 0 2.9-0.3 4.1-1 1.2-0.7 2.3-1.7 3.3-3 1-1.3 2-3 2.9-5.1 0.9-2.1 1.8-4.5 2.7-7.3 1.1-3.4 2.2-6.8 3.3-10.2s2.3-6.8 3.5-10.1l16.2-44.6h5.3v-2H636.5z"/> <path class="st0" d="M29.8 35.8h31v1.8h-5.3L69 85.1l-0.8 2.7 9.1-29.4 -6.4-20.9h-7.5v-1.8H96v1.8h-8.4l14.1 50.1 -0.7 2.3 16-52.3h-8.9v-1.8h19v1.8h-8l-23 75h-2.2L78.5 61.9h-0.2l-15.5 50.7h-2.4l-22.7-75h-8L29.8 35.8 29.8 35.8z"/> <rect x="419.5" y="65" class="st0" width="31.5" height="2"/> <rect x="495.9" y="65" class="st0" width="16.7" height="2"/> <polygon class="st0" points="475.4 67.3 474.3 65 459 92.8 444.8 65 424.8 65 448.7 116 465 86 "/> <polygon class="st0" points="507.1 65 504.7 65 489.4 92.8 474.3 65 464 83.7 479.1 116 495.5 86 506 67 "/> </svg> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="wb-logo"> <ul class="nav navbar-nav"> <li><a href="#">SentenceBlender</a></li> <li><a href="#">Lists</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Join WordBrewery</a></li> <li><a href="#">Log in</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

.navbar { background-color: #EBB331; min-height: 90px; } .navbar-toggle { line-height: 55px; margin-top: 25px; } .navbar-header { height: 90px; } .navbar-nav>li>a { line-height: 90px; } svg { height: 100%; width: 100%; } .st0 { fill:#F0EDE4; } .wb-logo:hover .st0 { fill: #fff; } .wb-logo { position: absolute; left: 50%; display: block; width: 160px; text-align: center; background-color: transparent; margin-left: -80px } .navbar-default .navbar-toggle { border-color: #F0EDE4; } .navbar-default .navbar-toggle:hover { background-color: #EBB331; } .navbar-default .navbar-toggle:hover .icon-bar { background-color: #fff; } .navbar-default .navbar-toggle .icon-bar { background-color: #F0EDE4; } .navbar-nav>li>a { color: #F0EDE4 !important; } .navbar-nav>li>a:hover { color: #fff !important; }