I'm a first-time coder and know next to nothing. I'm trying to learn html, css, and js online. I'm trying to create a a responsive site where the navbar menu collapses on smaller resolutions. As of now the menu icon gets highlighted in white when I click on it but doesn't expand to show the items.
I'm using bootstrap 3.3.6 and jquery 2.1.4 (I know it's old but the course I'm learning from is using these)
Thanks in advance!!
(PS: Ignore the content, names etc, I'm just trying to keep it interesting for myself)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gorilla Sports</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style_ch.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght#0,500;1,500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg" >
<div id="logo-img" ></div>
</a>
<div class="navbar-brand">
<h1>Gorilla Sports</h1>
<p>
<img src="Images/gorilla_small.jpg" alt="Gorilla">
<span>Gorilla</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#collapsable-nav"
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>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:+91-9910673649">
<span>+91-9910673649</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
https://jsfiddle.net/fjg1c5bk/ your collepse menu is working. Maybe your bootsrap libraries is not correct. Can u change them with belows and try again
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Related
The navbar works fine on the big screen but when you go to a mobile screen the collapse closes back after pressing the collapse icon.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #7e9094;">
<nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand active" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" data-target="#demo" id="navbarText">
<ul class="navbar-nav" id="demo">
<li class="nav-item">
<a class="nav-link" href="shop/shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects/projects.html">Projects</a>
</li>
</ul>
<span class="navbar-text"><a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a></span>
</div>
</nav>
</body>
</html>
Just update the CDN link for your JavaScript to match the CSS. Both need to be on the 4.x version.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #7e9094;">
<nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand active" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" data-target="#demo" id="navbarText">
<ul class="navbar-nav" id="demo">
<li class="nav-item">
<a class="nav-link" href="shop/shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects/projects.html">Projects</a>
</li>
</ul>
<span class="navbar-text"><a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a></span>
</div>
</nav>
</body>
</html>
it is just a supplement to the answer of #isherwood and #MrUpsidown.
Indeed, you have incompatible css, jquery and bootstrap versions in your code.
If you want to use the latest version of Bootstrap, you should do like in an example from the answer above. It means you need the same version of css as the version of bootstrap is, 4.3.1. It is also recommended to use jquery slim build. You could read more on the 'Getting started' guide for Bootstrap 4.3.
If you actually need the bootstrap 3.4.1 (that actually was a typo in your code, I believe), you need different css and jquery for it as it follows from the 'Getting started' guide for Bootstrap 3.4 An example of navbar for that version of bootstrap you can find here.
In this case your code will be something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #7e9094;">
<nav style="background-color: #213239;" class="navbar navbar-expand-lg navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarText"
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>
<a class="navbar-brand" href="#">Home</a>
</div>
<div class="collapse navbar-collapse" data-target="#demo" id="navbarText">
<ul class="navbar-nav" id="demo">
<li class="nav-item">
<a class="nav-link" href="shop/shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects/projects.html">Projects</a>
</li>
</ul>
<span class="navbar-text">
<a class="nav-link" href="index.html"><img style="float: right;" width="10%" src="img/image.img"></a>
</span>
</div>
</nav>
</body>
</html>
But be careful. 3.4.1 and 4.3.1 are actually different versions :) Good luck with that!
Yes i know this question has been asked previously on Stackoverflow millions of time,i looked over them but still unable to find what's wrong.Any help would be appreciated,thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>front page</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mainNavbar"> <!--Main menu starts-->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
jQuery file should be loaded first in order to achieve that.
So it should be like this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
I am pretty new to bootstrap. I am currently working on Navbar. want to make it responsive on collapse. it works perfectly fine when i am working locally. But i see that menu bar does not close contents on click. I tried to use the CSS link and script link from CDN. also made use of the folders. But i suspect somewhere script is not loading as expected.
here is my code
<html>
<!-- New: report inputs using textarea instead of single text line
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> NB Sep 2016</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/menubarStyle.css">
<link rel="stylesheet" href="css/NB_GUI2.css">
<link rel="stylesheet" href="css/awsModal.css">
<link rel="stylesheet" href="css/PAmodal.css">
<link rel="stylesheet" href="css/eventTable.css">
<link rel="stylesheet" href="css/reportModal.css">
<link rel="stylesheet" href="css/textModal2.css">
</head>
<body>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!--<nav class="navbar navbar-default "> -->
<nav class="navbar navbar-default 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="#menuItems" 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>
<!--<a class="navbar-brand" href="#">Brand</a>-->
</div>
<div class="navbar-collapse" id="menuItems">
<ul class="nav navbar-nav">
<!--<li><span class="glyphicon glyphicon-align-left" ></span></li>-->
<li> </li>
<li>XYZ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:white"><span>Welcome,Dr.David Yang </span></a></li>
<li> <span class="glyphicon glyphicon-user" style="color:brown"></span></li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/fili.min.js"></script>
<!--<script src="js/bootstrap.js"></script>-->
<script src="js/MyJS34-webviewer1-test7.js" type="text/javascript"></script>
<script src="js/teechart.js" type="text/javascript"></script>
<script src="js/teechart-extras.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/downloadify.min.js"></script>
<script type="text/javascript" src="js/jspdf.debug.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/aws-sdk.js"></script>
<!-- <script src="js/PreAnnotationModal6.js" type="text/javascript"></script> -->
<script src="js/PreAnnotationModal7-webviewer1-test4.js" type="text/javascript"></script>
<script src="js/AWSmodal3-webviewer1-test1.js" type="text/javascript"></script>
<script src="js/bootstrap.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I just modified your code it's working fine now
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default row">
<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="#">Welcome</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left-sm">
<li> </li>
<li>XYZ</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color:#000"><span>Welcome,Dr.David Yang </span></a></li>
<li> <span class="glyphicon glyphicon-user" style="color:brown"></span></li>
</ul>
<hr class="visible-xs visible-sm row"/>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
</body>
</html>
Here in this line <div class="navbar-collapse" id="menuItems"> add collapse class because the data-toggle = "collapse" is written on the button which is supposed to close.
My nav bar in Bootstrap does not come down when the screen gets too small. On mobile, for example, it doesn't work unless the phone is in landscape mode. Here is my code:
<nav class="navbar navbar-default">
<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="index.html">
<img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
I'm not too familiar with Bootstrap, so I can't tell if there's something glaringly obvious I'm doing wrong. Is there any reason why the collapse button would not drop-down after the screen gets too small?
<!DOCTYPE html>
<html lang="en">
<head>
<title> My site! </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/3.4.3/js/jquery.animsition.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
<script src="js/index.js"></script>
<!-- Typing effect on homepage is in js/typed.js -->
<script src="js/typed.js"></script>
<link rel="stylessheet" type="text/css" href="bootstrap-social-gh-pages/bootstrap-social.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-default">
<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="index.html">
<img alt="brand" width=10% margin-bottom:5% src="img/New4.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center push-center" >
<div style="background:transparent !important" class="jumbotron">
<h1 id="main">Hi there</h1>
<p> <i class="fa fa-globe" aria-hidden="true"></i> <span class="element"></span> </p>
<p> <i class="fa fa-briefcase" aria-hidden="true"></i> <span class="element1"></span> </p>
<p> <span class="element2"> </span> <span class="rest"></span> </p>
</div>
</div>
</body>
</html>
I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. Please helps.
The following is my HTML :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<title>#ViewBag.Title - OTANI TIRE CO., LTD.</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery")"></script>
<script src="#Url.Content("~/Scripts/bootstrap")"></script>
</head>
<body>
<div 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=".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>
<ul class="nav navbar-nav">
<li>
<a href="#Url.Action("Index", "Home")" title="Index" class="links">
<img alt="Index" src="#Url.Content("~/Content/Logo-Otani-3D_H2.png")">
</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("New Arrivals", "NewArrivals", "Home")</li>
<li>#Html.ActionLink("Brochure", "Brochure1", "Home")</li> <li>#Html.ActionLink("Awards", "Awards", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<br>
<br>
<br>
<br>
<hr />
<footer>
<p>© #DateTime.Now.Year - OTANI TIRE CO., LTD. - ALL RIGHTS RESERVED.</p>
</footer>
</div>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
</body>
</html>
First Add the class navbar-brand to your logo. Its span was blocking the dropdown button
<a href="#Url.Action("Index", "Home")" title="Index" class="links navbar-brand">
<img alt="Index" src="#Url.Content("~/Content/Logo-Otani-3D_H2.png")">
</a>
and make sure your the Javascript files are loaded
details here https://plnkr.co/edit/J8XEdyzVvtCIoguNOLVc