Ver Fonte

header: improve nav link layout at xs widths

Kyle P Davis há 8 anos atrás
pai
commit
6390e106de
1 ficheiros alterados com 8 adições e 4 exclusões
  1. 8 4
      _includes/header.html

+ 8 - 4
_includes/header.html

@@ -6,13 +6,17 @@
 				<code>&lt; Kyle P Davis /&gt;</code>
 			</a>
 		</div>
-
-		<ul class="nav navbar-nav">
-			<li><p class="navbar-text container-fluid"><small><code>['tech', 'code', 'rants']</code></small></p></li>
+		<div class="navbar-left">
+			<p class="navbar-text">
+				<small><code style="padding:0">['tech', 'code', 'rants']</code></small>
+			</p>
+		</div>
+		<ul class="col-xs-4 col-sm-2 nav navbar-nav" style="padding:0">
 			<li><a href="/posts.html" title="Posts"><i class="fa fa-file-text-o"></i><span class="hidden-sm"> Posts</span></a></li>
 			<li><a href="/tags.html" title="Tags"><i class="fa fa-tag"></i><span class="hidden-sm"> Tags</span></a></li>
 		</ul>
-		<ul class="nav navbar-nav navbar-right">
+		<div class="col-xs-7 nav navbar-nav visible-xs-inline-block">&nbsp;</div>
+		<ul class="nav navbar-nav navbar-right" style="display:inline-block">
 			<li><a href="http://KylePDavis.com/resume/" target="_blank" title="Resume"><i class="fa fa-user"></i><span class="hidden-sm"> Resume</span></a></li>
 			<li><a href="https://github.com/KylePDavis/" target="_blank" title="GitHub"><i class="fa fa-github"></i><span class="hidden-sm"> GitHub</span></a></li>
 			<li><a href="https://twitter.com/Kyle_P_Davis" target="_blank" title="Twitter"><i class="fa fa-twitter"></i><span class="hidden-sm"> Twitter</span></a></li>