Below is my code for showing a dropdown. In my code, if I remove class "dropdown-toggle" then also it works fine. So I am wandering what is the use of "dropdown-toggle" class?
<div class="container">
<div class="dropdown">
<button type="button" data-toggle="dropdown" class="btn dropdown-toggle">Options<span class="caret"></span></button>
<ul class="dropdown-menu">
<li role="presentation">Home</li>
<li class="active">About Me</li>
<li class="disabled">About Appirio Inc</li>
</ul>
</div>
</div>
Refer this link for more about dropdown-doggle : http://www.tutorialspoint.com/bootstrap/bootstrap_dropdown_plugin.htm
Related
Please help me to understand the use of "dropdown-toggle" class in dropdown. In the code below, I have removed the "dropdown-toggle" class. Without this also dropdown is working fine. Then What is use of this class.
<div class="container-fluid">
<h1>Hello, world!</h1>
<div class="dropdown">
<button type="button" class="btn btn-info" data-toggle="dropdown">MENU</button>
<ul class="dropdown-menu">
<li>ITEM-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
<li>ITEM-1</li>
</ul>
</div>
The dropdown-toggle class adds the outline: 0; on :focus to the button, so when you click on the button it will not have the surrounding blue border of the "active" element.
Look on the the sample example below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials - no border
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>
<div class="container">
<h2>Dropdowns</h2>
<p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p>
<div class="dropdown">
<button class="btn btn-default" type="button" data-toggle="dropdown">Tutorials - with border
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>
I'm trying to start my own business and looking to save a bit of money by using a bootstrap 3 based template I purchased.
The menu on mobiles doesn't collapse when a menu item is chosen nor when someone clicks outside the menu. Apparently it's not supposed to which strikes me as wildly counterintuitive but there we go. How might I go about getting it to collapse when a subject is chosen OR someone clicks outside the menu, please? There are similar questions here but none of them have worked for me thus far. I'm probably doing something stupid though.
<nav class="navbar navbar-default">
<div class="row">
<div class="navbar-header col-md-3 col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-res"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-navicon"></span> </button>
<!--======= LOGO =========-->
<div class="logo col-2"><img src="images/pdriving4.png" alt="" ></div>
</div>
<!--======= MENU =========-->
<div class="col-md-9 col-sm-9">
<div class="collapse navbar-collapse" id="nav-res">
<ul class="nav navbar-nav">
<li class="dropdown active"> Home </li>
<li class="dropdown"> About Paul</li>
<li class="dropdown"> Passed Gallery </li>
<li class="dropdown"> Courses </li>
<li>Contact</li>
<li class="dropdown"> FAQs </li>
<li class="dropdown"> Book Now </li>
</ul>
</div>
</div>
</div>
</nav>
I have a navBar with a drop-down. When you select either of the links on the drop-down the menu moves slightly to the left (+- 10px). You can see it a little better in mobile view.
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- add navbar-fixed-top -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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=""> <img src="" alt=""> </a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><i class="fa fa-home" aria-hidden="true"></i> </li>
<li> about </li>
<li class="dropdown">
overview <span class="caret"></span>
<ul class="dropdown-menu">
<li>cost breakdown</li>
<li>project progress</li>
</ul>
</li>
<li> photos </li>
<li> faq </li>
<li> news </li>
<li> contact </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- container-fluid -->
</nav>
https://jsfiddle.net/art852/uyg1otg5/12/
The shifting happens because you have a vertical scrollbar due to content overflow. If you add the following it will remove the shift.
#navbar {
overflow-y:hidden;
}
https://jsfiddle.net/uyg1otg5/18/
I am really a newbie in bootstrap 3.
I have made this menu that will collapse when screen is resized, but nothing happend when I click on the button.
<button type="button" class="btn btn-navbar-highlight btn-lg btn-primary" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
NAVIGATION <span class="icon-chevron-down icon-white"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills ddmenu">
<li class="dropdown active">Home</li>
<li class="dropdown">About</li>
<li class="dropdown">
Page <b class="caret"></b>
<ul class="dropdown-menu">
<li>Full Page</li>
<li>Two Column</li>
<li>Three Column</li>
<li>Documentation</li>
<li class="dropdown">
Dropdown Item »
<ul class="dropdown-menu sub-menu">
<li>Dropdown Item</li>
<li>Dropdown Item</li>
<li>Dropdown Item</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Gallery</li>
<li class="dropdown">Contact</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
What am I doing wrong?
Bootstrap's JavaScript requires jQuery version 1.9.1 or higher.
You can use version 1.12.0, which is the last one of the 1.X branch at the moment, and it should work :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Bootstrap should have notified you about this in your browser's javascript console directly, you should enable it as soon as you develop with projects that deal with JavaScript.
I am new to bootstrap and am trying to learn it using the excellent W3schools website. I am basing my page on http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp. I have tried changing the hrefs in the navbar to offpage links but nothing works. I click the menu and nothing happens. Onpage links work fine.
How do i do offpage links?
TIA
Sample code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Home<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>example</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Can you please post the snippet of the navbar code in question.
My guess are you are not adding http to the href of the navbar. Try something like the on below:
<a href='http://example.com'>example</a>