How to add menu text only in mobile using bootstrap -
check screenshot http://i.stack.imgur.com/3myet.jpg
iam using following bootstrap menu code.
i want add text 'menu' in mobile only. how that?
<div class="row"> <div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">menu 1</a></li> <li><a href="about.html">menu 2</a></li> <li><a href="food.html">menu 3</a></li> <li><a href="apparels.html">menu 3</a></li> </ul> </div> </div> </div>
if want show navbar mobile view use "visible-xs" class .
<div class="row"> <div class="navbar navbar-default visible-xs"> <div class="navbar-header"> <span class="position">menu</span> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">menu 1</a></li> <li><a href="about.html">menu 2</a></li> <li><a href="food.html">menu 3</a></li> <li><a href="apparels.html">menu 3</a></li> </ul> </div> </div> </div> @media (min-width: 320px) { .position { float: left !important; margin-left: 69%; margin-top: 12px; font-size: 18px; } } @media (min-width: 360px) { .position { float: left !important; margin-left: 73%; margin-top: 12px; font-size: 18px; } }
Comments
Post a Comment