I am building a bootstrap nav for share buttons. I want it to stay on the same line but that only works on a big screen. On a small screen the buttons go below the brand sign.
Here is the HTML:
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.tageswoche.ch">
<img alt="Tageswoche" src="logo-tw.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a id="shareemail"><img src="email.png" class="share"></a></li>
<li><a id="sharetwitter"><img src="twitter.png" class="share"></a></li>
<li><a id="sharefb"><img src="facebook.png" class="share"></a></li>
</ul>
</div>
</nav>
</header>
And here is a fiddle: http://jsfiddle.net/44t9ud4e/
Pull the brand section left by ".pull-left" and apply following class to share button section.
.right-bar>li, .right-bar {
float: right !important;
}
Check it out here
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- pull-left class added here -->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="http://www.tageswoche.ch">
<img alt="Tageswoche" src="http://labs.tageswoche.ch/geschichten/img/logo-tw.png">
</a>
</div>
<!-- right-bar class added here -->
<ul class="nav navbar-nav navbar-right right-bar">
<li><a id="shareemail"><img src="http://labs.tageswoche.ch/geschichten/img/email.png" class="share"></a></li>
<li><a id="sharetwitter"><img src="http://labs.tageswoche.ch/geschichten/img/twitter.png" class="share"></a></li>
<li><a id="sharefb"><img src="http://labs.tageswoche.ch/geschichten/img/facebook.png" class="share"></a></li>
</ul>
</div>
</nav>
</header>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.