I cannot find out why the dropdown menu does not work. I am completely new in web dev
enter image description here
Make sure you have added bootstrap CDN link like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Check this link for navbar with dropdown menu:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
Post your html and css here. I can see only html code in image
Make the dropdown-menu class div tag a ul tag and all the links that need to be dropdown-items in li tags. That should work I guess.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Categories
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-item">Item 1</li>
<li class="dropdown-item">Item 2</li>
<li class="dropdown-item">Item 3</li>
</ul>
</li>
Related
I have multiple 5 tabs with content for each tabs, I created tab in footer for click to move next. Now when I click to next tab text its working to move to next tab but after move tab page is still in footer where we clicked I need when click to next tab, next page will open from top tabs, thanks in advance
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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">
<!-- 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>
<div class="tab" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs about-sii-tab" role="tablist">
<li role="presentation" class="active">Tab 1</li>
<li role="presentation">Tab 2</li>
<li role="presentation">Tab 3</li>
<li role="presentation">Tab 4</li>
<li role="presentation">Tab 5</li>
</ul>
</div>
<!--footer tab for move next -->
<nav>
<ul class="switch-box theme-colored pull-right m-0" role="tablist">
<li class="switch-text">Switch to Next Tab</li>
</ul>
</nav>
I can't get this menu to show horizontal, I want it to show like the one on w3Schools (enter their page, and above, in the navbar there is an option with "MORE", so when you click it, it shows a big menu with many a lot of options.)
The CSS is the simple Bootstrap default one.
I can't get mine to do so. Here is the code I'm using:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Extra Verification <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Provides Address, Status, Previous Names</li>
<li>Connecticut </li>
<li>Georgia </li>
<li>Louisiana</li>
<li>Vermont</li>
<li>New Mexico</li>
<li class="divider"></li>
<li class="dropdown-header">Provides Address and Status</li>
<li>Alabama</li>
<li>Alaska</li>
<li>Arkansas</li>
<li>Arizona</li>
<li>California</li>
<li>Colorado</li>
<li>Hawaii</li>
<li>Idaho</li>
<li>Maryland</li>
</ul>
</div>
So if I'm understanding correctly, you want the dropdowns to appear/disappear on click? You need jQuery to do that. With CSS you can make them appear/disappear on hover but not toggle on clicking.
You have to include jQuery and Bootstrap JavaScript into your page:
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Extra Verification
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Provides Address, Status, Previous Names</li>
<li>Connecticut </li>
<li>Georgia </li>
<li>Louisiana</li>
<li>Vermont</li>
<li>New Mexico</li>
<li class="divider"></li>
<li class="dropdown-header">Provides Address and Status</li>
<li>Alabama</li>
<li>Alaska</li>
<li>Arkansas</li>
<li>Arizona</li>
<li>California</li>
<li>Colorado</li>
<li>Hawaii</li>
<li>Idaho</li>
<li>Maryland</li>
</ul>
</div>
</body>
</html>
I have a Bootstrap Navbar that has lot of tabs. The Bootstrap Nav Bar looks like this.
Is there any way to prevent it.
The HTML Code:
<link rel="stylesheet" href="CDNs/bootstrap.css">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">v1.0</a>
</div>
<ul class="nav navbar-nav">
<li style="float:right">Upload</li>
<li style="float:right">Events of ©</li>
<li style="float:right">Tracker</li>
<li style="float:right"><span class="glyphicon glyphicon-pencil"></span> Return</li>
<li style="float:right"><a href="#"><span class="glyphicon glyphicon-inbox"></span> My< /a></li>
<li style="float:right"><span class="glyphicon glyphicon-user"></span> SignOut</li>
<li style="float:right"><a class="navbar-brand" href="#"><?php
echo "Logged in as " . $_SESSION["username"] . "<br>";
?></a></li>
</ul>
</div>
</nav>
*I have masked few tab names and edited the tab names in the code due to security issues*
Thanks,
If what you need is to have them all in one line, this fiddle should work.
These were the only properties needed:
.nav.navbar-nav {
display: inline-block;
float: right;
}
ul.nav.navbar-nav > li {
display: inline-block;
}
Here is the image:
You can see all tabs are in order (the signOut tab looks like that because it has an anchor tag on top of it).
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
There are few mistakes in your markup
1) There is an extra space on your closing < /a> tag in your "My" option
<li style="float:right"><a href="#"><span class="glyphicon glyphicon-inbox"></span> My< /a></li>
Remove this.
2) Next remove all your inline style (float:right;). If you want to shift all towards right then just add the class navbar-right to your <ul> like this
<ul class="nav navbar-nav navbar-right">
<li></li>
<li></li>
<li></li>
</ul>
Codepen here
I'm trying to show the active tag on my nav bar. It shows on all tabs EXCEPT one with a drop-down. I can't figure out why its not calling the class on this particular button. I'm obviously placing it in the wrong place. Any help with this issue would be much appreciated!
Code: (The first one is CORRECT - ie - index.php is currently active. Where do I place the code (class="active") to make the next button (WHAT WE DO) the active tab when clicked?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="list-inline">
<li class="active">
<i class="fa fa-home"> </i>HOME
</li>
<li class="dropdown" role="presentation">
WHAT WE DO <span class="caret"></span>
<ul class="dropdown-menu">
<li>QUALITATIVE</li>
<li>QUANTITATIVE</li>
</ul>
</li>
<li> WHERE WE WORK</li>
<li> OUR CLIENTS </li>
<li> CONTACT US</li>
</ul>
</nav>
If I understand you correctly, you need to check the URL. (In my demo I set it to a specific URL) Then, add a class to the li parent.
var page = 'whatwedo_qualitative.php';
var a = $('[href="' + page + '"]');
$('.dropdown').has(a).addClass('active');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar-default">
<ul class="nav navbar-nav list-inline">
<li>
<i class="fa fa-home"> </i>HOME
</li>
<li class="dropdown" role="presentation">
WHAT WE DO <span class="caret"></span>
<ul class="dropdown-menu">
<li>QUALITATIVE</li>
<li>QUANTITATIVE</li>
</ul>
</li>
<li> WHERE WE WORK</li>
<li> OUR CLIENTS </li>
<li> CONTACT US</li>
</ul>
</nav>
you need a javascript code to add/remove active class to the a link pressed.. something like this:
$("a").click(function() {
//remove all active class from a elements
$(this).addClass("active"); //add the class to the clicked element
});
a similar functionality is here: Add and remove a class on click using jQuery?
I'm learning bootstrap for the first time and the dropdown menu seems to be unformatted and doesn't look like the other menu options that I've made. Its also not appearing when clicked, but I followed a tutorial exactly. Any ideas on the problem or mistakes?
<html>
<head>
<title>Bootstrap Testing</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<!--Logo-->
<div class='navbar-header'>
<a href="#" class='navbar-brand'>MY LOGO</a>
</div>
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</div>
</nav>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
</body>
You need to place the <li class='dropdown'> within the <ul class='nav navbar-nav'>. (The presence of an <li> element without a parent list element should probably be cause for alarm in any case.)
So that part of your HTML should be shuffled to look like:
<!-- [...] -->
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
</div>
<!-- [...] -->
Here's a Bootply of the revised code. Hope this helps! Let me know if you have any questions.
The bootstrap.min.js needs to come after you load jquery. I always like to start my documents with the basic template bootstrap shows here: http://getbootstrap.com/getting-started/#template
It makes it a lot easier to make sure I have everything loading and in the right order.
You will also want to move your dropdown li to be inside your ul with the "nav navbar-nav" class. Like this:
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>