I am implementing Bootstrap navbar but it's not displaying fine and displaying an error on my console saying
I tried to change the orders of my script sin head section but didn't get rid of this problem.
Anyone help me in finding out my mistake?
Code
<head>
<meta charset="UTF-8">
<title></title>
<!-- Ajax Library 1.11.3 -->
<script src="assets/js/ajax_1.11.3.js"></script>
<!-- Tether for Bootstrap -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<!-- Including js file for Animations Effects-->
<script type="text/javascript" src="assets/js/jquery_2.1.3_animation.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui_1.11.3.js"></script>
<!--Including both these files from Html_respond master-->
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<!-- Including js file for Fonts-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- Including Files for Bootstrap Form Validations -->
<script src="assets/js/form_Validation.js"></script>
<script src="assets/js/formvalidation_bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button-collapse').sideNav();
}); // end of document ready
</script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<!--Collapse button-->
<i class="fa fa-bars white-text"></i>
<!--Content for large and medium screens-->
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#">Navbar</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<!--Search form-->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!-- Content for mobile devices-->
<div class="navbar-mobile">
<ul class="side-nav" id="mobile-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar-->
</body>
Double Navigation Menu Demo (SideNav slide-out button)
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
body {
background: url("http://mdbootstrap.com/images/regular/nature/img%20(23).jpg") no-repeat center center fixed;
background-size: cover;
}
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">
<!-- SideNav slide-out button -->
<i class="material-icons">menu</i>
<!--/. SideNav slide-out button -->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav admin-side-nav dark-side-nav">
<!-- Side navigation links -->
<ul class="collapsible collapsible-accordion">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-money"></i> Sales</li>
<li><i class="fa fa-line-chart"></i> Conversion</li>
<li><i class="fa fa-users"></i> Website Traffic</li>
<li><i class="fa fa-search"></i> SEO</li>
<li><i class="fa fa-share-alt"></i> Social</li>
</ul>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="double-navbar navbar navbar-fixed-top unique-color z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header pull-left">
<!-- SideNav slide-out button -->
<i class="fa fa-bars"></i>
<!--/. SideNav slide-out button -->
</div>
<!-- Navbar Icons -->
<ul class="list-inline pull-right text-center">
<li><i class="fa fa-question"></i><br><span>Help</span></li>
<li><i class="fa fa-cogs"></i><br><span>Settings</span></li>
<li><i class="fa fa-sign-out"></i><br><span>Logout</span></li>
</ul>
<!--/. Navbar Icons -->
</div>
</nav>
<!--/.Navbar-->
<div class="container">
<div class="space-50" style="height: 300px"></div>
<h1 class="white-text">Scorll Down</h1>
<div class="space-50" style="height: 900px"></div>
</div>
Toggle Navigation Demo.
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
$('.collapsible').collapsible();
body {
background: url("http://mdbootstrap.com/images/regular/nature/img%20(4).jpg") no-repeat center center fixed;
background-size: cover;
}
.top-nav-collapse {
background-color: #3F729B !important;
}
/* Small Devices, Tablets */
#media only screen and (max-width: 768px) {
.navbar {
background-color: #3F729B !important;
}
}
<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="http://mdbootstrap.com/live/_doc/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="http://mdbootstrap.com/live/_doc/css/mdb.min.css" rel="stylesheet">
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/bootstrap.min.js"></script>
<!-- Material Design Bootstrap -->
<script type="text/javascript" src="http://mdbootstrap.com/live/_doc/js/mdb.min.js"></script>
<!--Navbar-->
<nav class="navbar primary-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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 waves-effect waves-light" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</nav>
<!--/.Navbar-->
Related
I've run into a small issue whilst using Bootstrap. Every time I expand my menu (burger icon) it doesn't collapse after I attempt to close it. Could you please let me know where I've gone wrong & what I could do to avoid this issue in the future, thank you.
<body>
<nav id="mainNavBar" class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">CANDY</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TICKETS</a>
</li>
</ul>
</div>
</nav>`
</body>
emphasized text
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav id="mainNavBar" class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">CANDY</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navLinks"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TICKETS</a>
</li>
</ul>
</div>
</nav>
`
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
I try it and works perfectly. Make sure you are using correct bootstrap version.
I'm not able to hide the navbar after the link is clicked. I'm using bootstrap 3. I have added the script that should work. I'm not able to find the error. Can someone go through this code. Please
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
According to docs you have to put collapse in class
.collapse hides content
.collapsing is applied during transitions
.collapse.in shows content
But this is not enough.
I'm not able to hide the navbar after the link is clicked.
Would you like to hide the whole navbar or the menu section which appears on small screen sizes?
If you want the first one you have to put classes in nav tag and use different query in jquery
Example
$(function() {
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide'); // hides menu on lower screens
//$(".navbar").collapse('hide'); // hides the whole navbar
});
})
html,
body {
height: 100%;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
<div class="container">
<nav class="collapse in navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse in navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
Did you try Something like this :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a>
</li>
<li class="nav-link" class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-pawn"></span> Awards</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
</html>
Use this in js
$(function () {
$(".navbar-collapse ul li a").click(function() {
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse ul li a").click(function (event) {
$(event.target).focus();
});
});
what is wrong with this code before all my hair fallout.
<img src="logo.png" alt="Ask a local" class="img-fluid w-35">"The most trusted local community"
<button class=" navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" id="zeropadding">
<span class="d-md-none" id="zeropadding"><i class="fas fa-align-left " >Menu </i></span> </button></div> <!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul></nav>
Here's a responsive Bootstrap collapsible navigation bar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul>
</ul>
</div>
</div>
</nav>
</body>
</html>
</body>
</html>
I'm sorry... but your code is really terrible! Same ID twice, </div> never open, text without tag... really terrible! (^_^;)
I do not know where to start... maybe it's better if you read the bootstrap documentation http://getbootstrap.com/docs/4.1/getting-started/introduction/.
Now your menu works (I cleaned your HTML as best as I could), but you have to use HTML&CSS better because as it is, it is not a good work, sorry.
BTW, hope it helps you to improve your web designer techniques.
Cheers :)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">
<a href="index.php"><img src="logo.png" alt="Ask a local" class="img-fluid w-35">
"The most trusted local community"</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" id="zeropadding">
<i class="fas fa-align-left">Menu</i>
</button>
<div class="collapse navbar-collapse bg-light" id="myTogglerNav"> <!-- Links -->
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="top10questions.php">Latest questions</a> </li>
<li class="nav-item"> <a class="nav-link" href="contactus.php">Contact Us</a> </li>
</ul>
</div>
</nav>
I have html code working with bootstrap 4. In my case when navbar toggle button clicked the navbar open and hidden automatically. How to manually open and hidden navbar when clicked? Thanks anyone.
<title>SuperEvent</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<img src="img/iklan.JPG" class="iklan float-right">
</div>
</div>
<div class="cleafix"></div>
<nav class="navbar navbar-expand-lg " id="nav" >
<a class="navbar-brand" href="#">Super Event</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
This can help:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
</body>
</html>
For more details follow by link - https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
If you want to use Bootstrap 5, include just this in your HTML file:
<script src="js/bootstrap.js"></script>
Implementation example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark">
<div class="container-fluid">
<!--LOGO IMAGE-->
<a class="navbar-brand" href="#">
<img src="images/img_avatar1.png" alt="Avatar Logo" style="width:50px;" class=" rounded-pill">
</a>
<a class="navbar-brand" href="#"><span style="font-size: 30px;">Alex Luca</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-expanded="false" aria-controls="collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!--Using justify-content-end, you can align the links at the right-->
<div class="collapse navbar-collapse justify-content-end text-center" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown px-3">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
<!--For the dropdown menu and collapsed meniu-->
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I have a site and i am working in php html css javascript/jquery
i am using bootstrap theme for the first time. Its so good using bootstrap but i have a problem in menu bar navigation active link
even if i add a jquery changing a active class it doesnot work .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Real Estate</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/style.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/script.js"></script>
<!-- Owl stylesheet -->
<link rel="stylesheet" href="assets/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!-- Owl stylesheet -->
<!-- slitslider -->
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/custom.css" />
<script type="text/javascript" src="assets/slitslider/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.slitslider.js"></script>
<!-- slitslider -->
<script>
$(document).ready(function(e) {
$('#username').hover(
function (){
$('#submenu').css("display", "block");
/*$('#submenu').css("background-color", "#999");
$('#submenu').css("color", "#000");*/
$('#submenu').css("z-index", "1");
},
function () {
$('#submenu').css("display", "none");
}
);
});
</script>
</head>
<body>
<!-- Header Starts -->
<div class="navbar-wrapper">
<div class="navbar-inverse" role="navigation">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<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" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agents</li>
<li>Contact Us</li>
<li>About Us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Your Name<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Edit Profile</li>
<li>Log Out</li>
</ul>
</li>
<li>Log in</li>
<li>Register</li>
</div>
</nav>
</div>
</div>
</div>
<!-- #Header Starts -->
<div class="container">
<!-- Header Starts -->
<div class="header">
<img src="images/logo.png" alt="Realestate">
<ul class="pull-right" style="margin-top:10px;">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?> </li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Land
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?></li>
</ul>
<!-- <div id ="salesBranch" style="display:none">
<div> Add Property </div> <div> Edit Property </div> -->
</div>
</div>
<!-- #Header Starts -->
</div>
i added following jquery to change the active class but also its not working properly
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
I think it might be because your menu loads different pages than the one you are on. You need to set the active class on the appropriate nav link on page load. For example you could test if the href of the link is the same as the current page name and add class "active" if it is.