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>
Related
This is Angular 1.5 app. I have written the Menu bar in index.html file to keep it common in all views. Right now, Menu bar default value is set to home screen - "Personal". Other webpages' names aren't present in menu bar, instead an icon is present to represent those pages in menu bar.
When the user navigates to any other page, the name of that particular page should get displayed in menu bar and rest pages should be displayed as icon in menu bar.
How do I achieve this
This is how the menu looks like currently-
Here is my <body> of index.html file.
<body>
<div class="page" id="page">
<ul id="progress">
<li class="active progress-li">
Personal
</li>
<li class="progress-li">
<a ng-href="#/school">
<i class="fa fa-building-o" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li">
<a ng-href="#/pre-university">
<i class="fa fa-university" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li">
<a ng-href="#/university">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li">
<a ng-href="#/extras">
<i class="fa fa-cubes" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li">
<a ng-href="#/accolades">
<i class="fa fa-trophy" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li-last">
<a ng-href="#/job">
<i class="fa fa-suitcase" aria-hidden="true"></i>
</a>
</li>
</ul>
<main class="cf" ng-view></main>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/libs/angular/angular.min.js"></script>
<script src="js/libs/angular/angular-route.min.js"></script>
<script src="js/libs/angular/angular-animate.min.js"></script>
<script src="js/libs/angular/angular-cookies.min.js"></script>
</body>
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>
I am currently having issues with my dropdown menus. I would like them to only open/close when the dropdown menu is clicked, not the list items or anywhere else in the body.
Here is my code that I am having the issues with:
<main>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<span style="height:50px" />
</li>
<li class="dropdown" id="mi1">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Service Provision<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Service Provision<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Automation Requests<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</li>
<li class="dropdown">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">NMC<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Customers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Contractors<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Suppliers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</li>
<li class="dropdown">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Site Access<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Site Access<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Key Issue<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</ul>
<div class="dropup">
<a id="menu-toggle-reversed" href="#" class="dropdown-toggle dropup" data-toggle="dropdown"><i id="adminIconPadding" class="fa fa-user-md"></i>Admin<span class="fa fa-chevron-up pull-right sideMenuChevronsDropUp"></span></a>
<ul id="adminDropup" class="dropdown-menu" role="menu">
<li>Settings<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</div>
</div>
I have tried adding inline javascript to "stopPropagation" however this has resulted in the dropdown menu not opening at all.
Here is a rough jsfiddle of what is happening with the dropdown menus in the left navigation bar: https://jsfiddle.net/jr_iridium/aqLa77ax/
I'm relatively new to bootstrap so please let me know if I have made any mistakes.
Thanks in advance.
Here is my answer, after long testing since I used to with Boostrap 3. By removing the data-toggle="dropdown" is the only way to remove auto close during outside clicks. Related to here but your question is Bootstrap 4
Try this:
https://jsfiddle.net/rigz/pdc4un6L/5/
If the fiddle doesn't work just let me know, I'm having weird issue in fiddle since I'm under corporate proxy posting this :P
How can i edit this to be able to see the navbar options. Currently it has the same color as background.I want to change the font before to white and change them when it hover to white background with blue color font.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-dark bg-primary navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<div class="tog" style="padding-top:7px; ">
<a href="#menu-toggle" class="btn btn-default btn-sm" id="menu-toggle"> <span class="glyphicon glyphicon-eye-open"></span>
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-suitcase"></i><span class="glyphicon glyphicon-envelope"> </span>
</li>
<li><i class="fa fa-suitcase"></i><span class=" glyphicon glyphicon-bell"> </span>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
<img src="http://placehold.it/30x30" class="img-circle special-img">xxx <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-cog"></i> Account
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out"></i> Sign-out
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
go to your downloaded bootstrap.css file and makes the changes maybe somewhere around line 4489..
change the css of this selector
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: transparent;
}
I copied over the navbar example from the docs and it worked fine. I made several edits and now the toggle button is not working. I've looked at several threads in StackOverflow and haven't found anything that's helping me. Here is my code:
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#addressToolBar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="dropdown">
<button class="dropdown-toggle btn btn-primary navbar-btn" data-toggle="dropdown" role="button" aria-expanded="false"><span class="address-selected">4203 Afton Ln</span> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a>4203 Afton Ln, 78744</a></li>
<li><a>4511 Elwood Rd, 78722</a></li>
<li><a>8518 FM 1826, 78736</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-plus"></i> add new</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-mail-forward"></i> import</a></li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="addressToolBar">
<form class="navbar-form navbar-left address-search" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Other <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a><i class="fa fa-mail-reply"></i> export</a></li>
<li><a><i class="fa fa-file-excel-o"></i> get all invoices</a></li>
<li><a><i class="fa fa-usd"></i> billing options</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-trash"></i> delete</a></li>
</ul>
</li>
<li><a><i class="fa fa-edit"></i> Edit</a></li>
<li><a><i class="fa fa-plus"></i> Add New</a></li>
</ul>
</div>
</div>
</div>
Here is a (non-working) fiddle.
Your toggle button has a lower z-index than other elements, hence you can select it. Just add this line to your CSS and problem solved :
.navbar-toggle {
z-index: 100000;
}
See Bootply for reference
Your nav toggle is working fine. The issue is being caused by this bit of code
<div class="dropdown">
<button class="dropdown-toggle btn btn-primary navbar-btn" data-toggle="dropdown" role="button" aria-expanded="false"><span class="address-selected">4203 Afton Ln</span> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a>4203 Afton Ln, 78744</a></li>
<li><a>4511 Elwood Rd, 78722</a></li>
<li><a>8518 FM 1826, 78736</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-plus"></i> add new</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-mail-forward"></i> import</a></li>
</ul>
</div>
With position relative it is covering the entire width of the nav and so the toggle button is behind it and cant be pressed.
You could look at changing the position or at adding a z-index:xxxx; to the toggle button to keep it on the top layer.