I have sample navigation bar. But I couldn't collapse it as the 'data-toggle' and 'data-target' are not working. Please help me and also give suggestion if there is any other issue in my code. Here is the code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<title>Basic Log In Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Default.aspx" ><span><img alt="logo" src="Images/logo.png" height="30" /></span>BootStrap Demo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Social
<ul class="dropdown-menu">
<li>facebook</li>
<li>Twitter</li>
<li>Google+</li>
<li>Instagram</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery-1.12.0.min.js"></script>
</body>
</html>
i created your example at bootply and it works just fine. So all i can see here now is that your bootstrap js might not be loading. First add it above the page after bootstrap css and then you should be fine . Check it here http://www.bootply.com/z2FXC4SKJn
Related
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">
I am using the exact code suggested by Bootstrap:-
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
Here is the JSFiddle.
Please note that I did use Bootstrap CSS and JS as external resources in my JSFiddle.
You need to ether use the v4 markup for your current version of bootstrap or to use v3 for your current markup
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Try now it is working for me your are using Bootstrap v4.0.0-beta.2 try to use 3.3.7
.bs-example{
margin: 20px;
}
<!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>Example of Bootstrap 3 Static Navbar</title>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
When I shrink the page the navbar reduces in size appropriately, but the nav collapse button doesn't work. I can't see anything wrong with my code.
Why would this code work here or on JSFiddle, but not on a local machine using either IE or Chrome?
(JSFiddle)
<html>
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.4.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" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>My Library <small>A library for people who like libraries.</small>
</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid" id="navfluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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="navigationbar">
<ul style="width: 100%" class="nav navbar-nav navigationList">
<li id="homeListItem" class="active">
Home
</li>
<li id="libraryListItem">
Library
</li>
<li id="aboutUsListItem">
About Us
</li>
<li id="contactListItem">
Contact
</li>
<li id="loginListItem">
Login
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
Looks like a misspell of "scripts/boostrap.js" which should be "scripts/bootstrap.js".
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