I can add icons next to texts in the menu but fails to hide text (keep icons only) in small screen.
<ul class="nav navbar-nav">
<li>
<a asp-area="" asp-controller="Home" asp-action="Index">
<span class="glyphicon glyphicon-home"></span>
Home
</a>
</li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
Please help! Thanks.
Wrap your text in a div or span or paragraph, like this
<p class="hidden-xs">some text </p>
Wrap each menu item (text, without the glyph icon) in a span with a class of hidden-xs. This will hide the text and only leave the icons when the website is viewed on xs devices.
<span class="hidden-xs">Home</span>
<span class="hidden-xs">About</span>
<span class="hidden-xs">Contact</span>
Working demo on Codepen
Resize window to test it.
Related
I use materializecss and want to implement dropdown in floating button with icon inside.
Here is the markup:
<a href="#" class="dropdown-button btn-floating btn-sm waves-effect waves-light" :data-activates="'dropdown_' + order.id">
<i class="small material-icons">more_horiz</i>
</a>
<ul :id="'dropdown_' + order.id" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
Which is basically the same as in docs, however instead of simple button I use floating button and an icon inside. Without <i> it works fine, however with <i> I got display: none; for the dropdown.
How can I fix this?
update
Worked for me after updating to 0.98.2
I'm creating a small website and I'm stuck with the button alignment problem. I have a navbar list menu and I'd like to add a transparent Logout button near to them just in shape of another menu element, however, I couldn't be successful so far.
Here's a Bootply link you could see the problem; http://www.bootply.com/OXfRkJHEHs
I'd be grateful if you could help me.
<form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a style="color:#900C3F" href="index.php">Home</a>
</li>
<li>
<a style="color:#900C3F" href="festival.php">Festival</a>
</li>
<li>
<a style="color:#900C3F" href="contact.php">Contact</a>
</li>
<li>
<a style="color:#900C3F" href="map.php">Map</a>
</li>
<li>
<input type="submit" value="Logout" class="btn element" style="color:#900C3F; background-color: transparent; margin-top:7px" href="Logout.php">
</li>
</ul></div>
<div id="push"></div>
</form>
So my dropdowns all work fine but I've a main container div with a bg-color and as soon as the multi level dropdown menu goes over it the background doesn't display. The text is fine but the bg stops at the DIV margin.
I've tried using z-index at multiple stages even all the way up the nav div but nothing seems to work.
Has anyone experienced this before? Any ideas?
HTML Sample
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1" style="z-index:1;">
<ul class="nav navbar-nav">
<li><i class="fa fa-lg fa-home"></i> Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-lg fa-cog"></i> Tools</a>
<ul class="dropdown-menu multi-level">
<li class="">MAC Lookup</li>
<li>Locate ISP</li>
<li>PG&E Power Outages</li>
<li class="divider"></li>
Open the following bootstrap theme in full page mode:
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav?p=preview
on the nav bar you will see six options:
Three are font-awesome icons and the other three are text "About, Download and Contact".
What I am trying to achieve is to place the font-aweome icons in the center of the navbar instead of towards the right.
I have tried various options, like placing them in etc.. but all that results in something or the other breaking.
<ul class="nav navbar-nav nav-advance-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
<a class="page-scroll" href="#flax"><i class="fa fa-leaf"></i></a>
</li>
<li>
<a class="page-scroll" href="#moist"><i class="fa fa-heart"></i></a>
</li>
<li>
<a class="page-scroll" href="#designs"><i class="fa fa-paw"></i></a>
</li>
</ul>
<ul class="nav navbar-nav nav-basic-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
I'm working on a site that uses Bootstrap 3. I need to vertically align a button along the right side of a list item. In an attempt to do this, I am doing the following:
<ul class="list-unstyled list-info">
<li class="ng-binding ng-scope">
<label style="width:initial;" class="ng-binding">First Name Last Name</label><br>
Birthdate
<a ng-click="viewDetails()" class="btn-icon-round btn-icon-round-sm bg-success pull-right" style="vertical-align:middle;"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
How do I vertically center the icon in the right margin of the list item? I will have additional list items. For that reason, I need it in a list. However, I'm not sure how to do that.
Thank you!
One way to make it happen is to do something like this:
<ul class="list-inline">
<li>
<ul class="list-unstyled list-info">
<li class="ng-binding ng-scope">
<label style="width:initial;" class="ng-binding">First Name Last Name</label><br>
Birthdate
</li>
</ul>
</li>
<li>
<a ng-click="viewDetails()" class="btn-icon-round btn-icon-round-sm bg-success pull-right" style="vertical-align:middle;"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
Then pad the link to your discretion