Rework donate button

css/custom.css

@@ -17,6 +17,45 @@ body {
   width: auto;
 }
 
+#navbar {
+  max-height: 100%;
+}
+
+.navbar-nav {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse > .navbar-nav > #donate {
+    float: none;
+    padding: 0;
+  }
+
+  .navbar-collapse > .navbar-nav > #donate > a {
+    padding: 10px 15px;
+  }
+}
+
+@media (max-width: 992px) {
+  nav > .container {
+    width: 100%;
+  }
+}
+
+#donate {
+  float: right;
+}
+
+#donate-icon {
+  color: red;
+  margin-left: 5px;
+}
+
+#donate > a {
+  padding: 15px 0;
+  color: white;
+}
+
 a.anchor {
   display: block; position: relative; top: -50px; visibility: hidden;
 }

index.html

@@ -163,9 +163,13 @@
 							<li><a href="http://sharetodiaspora.github.io/?title=privacytools.io%20-%20encryption%20against%20global%20mass%20surveillance&url=https://www.privacytools.io">Diaspora*</a></li>
 						</ul>
 					</li>
-					<li><a href="https://twitter.com/privacytoolsIO">Twitter</a></li>
-					<li><a href="donate.html" style="color:white;"><button type="button" class="btn btn-default btn-xs"><strong>Donate</strong> <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color:red;"></span></button></a></li>
-				</ul>
+                                        <li><a href="https://twitter.com/privacytoolsIO">Twitter</a></li>
+                                        <li id="donate">
+                                            <a href="donate.html">
+                                                <strong>Donate</strong><span id="donate-icon" class="glyphicon glyphicon-heart" aria-hidden="true"></span>
+                                            </a>
+                                        </li>
+                                </ul>
 			</div>
 		</div>
 	</nav>