I'm new to bootstrap and was wondering if anyone could help me.
I want a menu with icons only, but trying to do it won't let me.
My HTML:
<div class="container">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Notifications</li>
<li> Discover</li>
<li>Messages</li>
</ul>
</div>
I want to display icons instead of messages.
Thanks for all the help.
You can include bootstrap glyphicons as icons using the below markup. Instead of text, update to <i> tag with respective glyphicon.
<div class="container">
<ul class="nav nav-pills">
<li class="active"><i class="glyphicon glyphicon-home"></i></li>
<li><i class="glyphicon glyphicon-ok"></i></li>
<li> <i class="glyphicon glyphicon-info-sign"></i></li>
<li><i class="glyphicon glyphicon-folder-open"></i></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<ul class="nav nav-pills">
<li class="active"><i class="glyphicon glyphicon-home"></i></li>
<li><i class="glyphicon glyphicon-ok"></i></li>
<li> <i class="glyphicon glyphicon-info-sign"></i></li>
<li><i class="glyphicon glyphicon-folder-open"></i></li>
</ul>
</div>
Related
i have a Bootstrap-Navbar on a ASP-Page. The Navbar ist included in a MasterPage and working fine with all the sites in root-Directory.
Some Pages with Login-Functionality are in an admin-Folder. These Pages use the same MasterPage, but when beeing on such a page, the Navbar isn't collapsing when clicking on a MainMenu-Item. The only thing that happens, is in the adress-box in the browser is a "#" appearing at the end.
Can someone help me solving this Problem ?
Greetings
Gregor
<nav class="navbar navbar-fixed-top" role="navigation" style="background-color:#286090;width:100%;z-index:10;">
<div class="container">
<!-- 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" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
</button>
</div>
<!-- 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><i class="fa fa-home"></i></li>
<li>
Serien
<ul class="dropdown-menu multi-level">
<li>Serien-Diary</li>
<li>Nicht-Beendete</li>
<li>Warteliste</li>
<li>Serien-Sichtung anlegen</li>
<li>Serien-Logo hochladen</li>
<li>DB Chronologie</li>
<li>Sichtungs-Chrono</li>
<li>Serien-Daten</li>
<li>Empfehlungen</li>
</ul>
</li>
<li>
Filme
<ul class="dropdown-menu multi-level">
<li>Film-Diary</li>
<li>in DB anlegen</li>
<li>DB Chronologie</li>
<li>Film-Sichtung anlegen</li>
<li>Empfehlungen</li>
<li>Liste Filtern</li>
<li>DVD's</li>
<li>BluRay's</li>
<li>
FILTERN<b class="caret"></b>
<ul class="dropdown-menu">
<li>
FSK
<ul class="dropdown-menu">
<li>Beschlagnahmen</li>
<li>SPIO/JK</li>
<li>Liste A</li>
<li>Liste B</li>
</ul>
</li>
<li>
Genre
<ul class="dropdown-menu">
<li>Splatter</li>
<li>Horror</li>
<li>Action</li>
<li>Science-Fiction</li>
<li>Fantasy</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Sonstiges
<ul class="dropdown-menu multi-level">
<li>Einstellungen</li>
<li>Protokoll</li>
<li>HOME</li>
</ul>
</li>
<li><i class="fa fa-hand-o-up"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I am making an example project for my PHP course, I have a sidebar navigation with 2 dropdown menus. Whenever I click on a dropdown button the list items of that menu keep disappearing. You can see the gif below to see what exactly happens.
Click here for the gif
This is the code below, it's only the side navigation. All the other parts like header, footer and content are in other pages and have been included in the index file using include() function of PHP.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.php">CMS Admin</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li>Visit Website</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>
<?php
if(isset($_SESSION['username']))
{
echo $_SESSION['username'];
}
?>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-user"></i> Profile
</li>
<li class="divider"></li>
<li>
<i class="fa fa-fw fa-power-off"></i> Log Out
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-fw fa-sticky-note"></i>Posts <i class="fa fa-fw fa-caret-down"></i>
<ul id="posts_dropdown" class="collapse">
<li>
View All Posts
</li>
<li>
Add Posts
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-sitemap"></i> Categories
</li>
<li class="">
<i class="fa fa-fw fa-comments"></i> Comments
</li>
<li>
<i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-caret-down"></i>
<ul id="demo" class="collapse">
<li>
View All Users
</li>
<li>
Add User
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-user-circle-o"></i> Profile
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
Check your script and link tags, it works fine, here a short example of your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.php">CMS Admin</a>
</div>
<!-- Top Menu Items -->
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-fw fa-sticky-note"></i>Posts <i class="fa fa-fw fa-caret-down"></i>
<ul id="posts_dropdown" class="collapse">
<li>
View All Posts
</li>
<li>
Add Posts
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-caret-down"></i>
<ul id="demo" class="collapse">
<li>
View All Users
</li>
<li>
Add User
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-user-circle-o"></i> Profile
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Vad gör vi?
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>Drift</h3></li>
<!-- Typography -->
<li><i class="glyphicon glyphicon-cloud"></i> Kapacitetstjänst</li>
<li><i class="glyphicon glyphicon-flash"></i> Kommunikation</li>
<li><i class="glyphicon glyphicon-road"></i> Managed server</li>
<li><i class="glyphicon glyphicon-eye-open"></i> Övervakning</li>
<!-- End Components -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<ul class="nav navbar-nav">
I´ve seen a few other questions in this topic, but the don´t answer mine.
Is it possible to put a delay to the dropdown when the marker is not in the dropdown area. (Just to prevent clients to fall of the menu).
Thankful for answers.
Here's the HTML for the dropdown part:
<li class="dropdown">
<a class="dropdown-toggle" href="/contact-us">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></a>
<a class="visible-xs visible-sm dropdown-menu-xs" href="#" data-toggle="dropdown"><i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li>testpage</li>
<li>testpage2</li>
</ul>
</li>
It just looks like this:
Nothing happens when I mouseover it, and clicking it takes me to the contact us page.
I should have all the necessary JS files:
<script src="/js/plugins/jquery.1.11.0.js"></script>
<script src="/js/plugins/bootstrap.min.js"></script>
<script src="/js/plugins/bootstrap-dialog.min.js"></script>
<script src="/js/owl.carousel.js"></script>
<script src="/js/custom.js"></script>
<script src="/js/validate.js"></script>
<script type="text/javascript" src="/js/plugins/sticky-tabs.min.js"></script>
<script src="/js/plugins/jquery.select2list.min.js"></script>
Not sure where I'm going wrong.
Edit - getting this error in console:
Not sure what's causing that though, there is no HTML in there
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
Working fiddle
https://jsfiddle.net/DTcHh/
There were few errors in your code.
You are not giving id to your button.
Missing data-toggle="dropdown" from button
You are not using aria-labelledby attribute in ul.
Checkout this snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<li class="dropdown">
<a class="btn btn-default dropdown-toggle" id="dropdownMenu" data-toggle="dropdown">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></a>
<a class="visible-xs visible-sm dropdown-menu-xs" href="#" data-toggle="dropdown"><i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li>testpage</li>
<li>testpage2</li>
</ul>
</li>
I have a menu built using Bootstrap 3.0. It floats to the left and can be re-sized to fit only the icons by adding a css class to it using jQuery's toggle_class(). What I want to achieve is once this menu is toggled to a smaller version, I would like the drop down menu to become a vertical slide out menu.
Here is an example of what I am trying to accomplish http://wrapbootstrap.com/preview/WB0B30DGR If there is a plugin that does please point me to it.
Here is my HTML code:
<div id="wrap">
<div id="content">
<div id="navigation" class="" role="navigation">
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
<span class="fa fa-bar"></span>
</button>
<a class="navbar-brand" href="./">CIMP Admin</a>
</div>
<!--SIDENAV
============================================= -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active" ><i class="fa fa-dashboard"></i> Dashboard</li>
<li class="dropdown ">
<i class="fa fa-camera"></i> Media <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-picture-o"></i> Library</li>
<li><i class="fa fa-picture-o"></i> Albums</li>
<li><i class="fa fa-picture-o"></i> Slideshows</li>
</ul>
</li>
<!-- Modules -->
<li class="dropdown ">
<i class="fa fa-puzzle-piece"></i> Modules <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-thumb-tack"></i> Posts</li>
<li><i class="fa fa-cloud"></i> Uploads</li>
<li><i class="fa fa-desktop"></i> Testimonials</li>
</ul>
</li>
<li><i class="fa fa-users"></i> Users</li>
<li calss="active"><a id="toggle-pane" href="#"><i class="fa fa-caret-square-o-left"></i> Hide Menu Bar</a></li>
</ul>
</div>
</nav><!--/ nav -->
</div><!--/ navigation -->
</div><!--/ content -->
</div><!-- wrap -->
<script type="text/javascript">
$("#toggle-pane").click(function () {
$('#wrap').toggleClass("folded");
});
</script>