I am looking to display the symbols like in scenario A for desktop screens and as in scenario B for mobile devices when the menu is expanded. (The code is identical in both scenarios, with the exception of the CSS).
Scenario A: http://jsfiddle.net/bs773m84/4/
<div class="container">
<nav class="header-nav-wrapper container-nav-menu navbar navbar-default white-back">
<div class="container-fluid">
<div class="navbar-header">
<a alt="" rel="home" href="google.com">
<img class="logo" src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex-android/48/app-drawer-icon.png"/>
</a>
<button data-target="#social-menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only"><?php _e('Toggle navigation menu','justmakeit');?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="col-sm-11 content">
<div class="container-fluid">
<div class="hidden-xs col-sm-6 blue-light-back"><span>Brand</span>
</div>
<div class="col-xs-12 col-sm-4 col-sm-push-4 col-md-push-4 red-dark-back">
<div id="social-menu" class="collapse navbar-collapse">
<ul class="menu nav navbar-nav navbar-default white-back">
<li class="facebook">
<a href="http://facebook.com" target="_blank">
<span class="glyphicon glyphicon-play-circle"></span><span class="social-name">facebook</span>
</a>
</li>
<li class="twitter">
<a href="http://twitter.com" target="_blank">
<span class="glyphicon glyphicon-download"></span><span class="social-name">twitter</span>
</a>
</li>
<li class="google-plus">
<a href="http://plus.google.com" target="_blank">
<span class="glyphicon glyphicon-download"></span><span class="social-name">google+</span>
</a>
</li>
<li class="pinterest">
<a href="http://pinterest.com" target="_blank">
<span class="glyphicon glyphicon-download"></span><span class="social-name">pinterest</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
Scenario A's CSS:
#social-menu li{
display: inline-block;
padding: 0px;
}
#social-menu li a{
padding: 0px;
}
#social-menu .social-name{
display: block;
height: 1.4375em;
overflow: hidden;
text-indent: 100%;
transition: all 0.3s ease 0s;
white-space: nowrap;
width: 1.4375em;
}
Scenario B: http://jsfiddle.net/77m94xf4/4/
The HTML remains the same as in Scenario A.
Scenario B CSS: None.