Issue
Using Twitter Bootstrap, is it possible to show menu item icons when the viewport shrinks rather than collapsing the menu altogether and just showing the three-bar button?
I have not changed the default css (other than applied the Flatly theme).
<nav id="navigation_bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- <div class="col-xs-10 col-xs-offset-1">-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Hawksmoor</a>
</div>
@if(Auth::check())
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-clock-o"></i> Timecard <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">View Timecard</a></li>
<li><a href="#">CICO</a></li>
<!-- <li class="divider"></li>-->
<!-- <li><a href="#">Separated link</a></li>-->
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-tasks"></i> Tasks <span class="badge alert-danger">2</span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">View Tasks</a></li>
<li><a href="#">Add a Task</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="/people"><i class="fa fa-users"></i> People</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-file-text-o"></i> Policies <b class="caret"></b></a>
<ul class="dropdown-menu">
<li role="presentation" class="dropdown-header">Work</li>
<li><a href="#"><i class="fa fa-suitcase"></i> Business Conduct</a></li>
<li><a href="#"><i class="fa fa-recycle"></i> Environment</a></li>
<li><a href="#"><i class="fa fa-fire-extinguisher"></i> Health & Safety</a></li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Home</li>
<li><a href="#"><i class="fa fa-plane"></i> Holiday</a></li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Other</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
@if (Auth::guest())
<!-- Not needed as employees will already be registered -->
<!-- <li><a href="/register">Sign up</a></li> -->
<!-- <li><a href="/login">Sign in</a></li> -->
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> {{ Auth::user()->profile->nickname }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/profile/{{ Auth::user()->username }}"><i class="fa fa-user"></i> View Profile</a></li>
<li><a href="/profile/{{ Auth::user()->username }}/edit"><i class="fa fa-pencil"></i> Edit Profile</a></li>
<li><a href="http://webmail.hawksmoorcs.co.uk/"><i class="fa fa-envelope"></i> Webmail</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-cog"></i> Preferences</a></li>
<li class="divider"></li>
<li><a href="/logout"><i class="fa fa-power-off"></i> Sign out</a></li>
</ul>
</li>
@endif
</ul>
</div><!-- /.navbar-collapse -->
@endif
<!-- </div>-->
</div><!-- /.container-fluid -->
</nav>
If someone could point me in the right direction it would be much appreciated.
Solution
There are two basic tasks you need to do here: 1) disable collapse 2) hide menu text
Demo: http://www.bootply.com/MWsmEO9bb4#
1) Disable the collapsing menu and hamburger icon. You’ll do this by overriding bootstrap CSS like so:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
NOTE: using !important is the simplest way to do this, but it’s also a bit of nuclear option as it can make your menu hard to manipulate later on. Deeper digging into bootstrap css will likely reveal some media queries you can override with more granularity… but that’s more digging than I have patience for right now:)
EDIT: It just occured to me, what I suggested below is unneecessary. No custom @media-query triggered class needed, just use Bootstrap’s hidden-xs like so:
2) Hide menu text at a given breakpoint like so:
<i class="fa fa-home"></i><span class="hidden-xs"> Home</span>
That’s it! EDIT OVER
2) Hide menu text at a certain breakpoint. You’ll do this by wrapping the text in a span with custom media query Bootstrap’s hidden-xs like so:
<i class="fa fa-home"></i><span class="hidemobile"> Home</span></a></li>
CSS
@media (max-width: 992px) { /* or whatever breakpoint you want */
.hidemobile {
display:none;
}
}
There is still some behaviour there that you may want to tweak (eg: how to handle your left/right split menu, when to bring the icons closer together to avoid second menu row, etc) but this should get you going in the right direction.
PS – I updated my bootply too…
Answered By – Shawn Taylor
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0