The issue is drop down menu to >My Profile< would not let it drop down. When you click in the navbar under >My Profile< nothing drops down. Can not figure out this problem. The web page should say > My Profile < (drops down)Friends/Photos/Settings. Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>My page is Dynamic</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<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">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"</script>
<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">
<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>
THEONEEYENICKY'SWEB
</div>
<!-- Menu Item -->
<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>
</div>
</nav>
</body>
</html>
Missing ">"
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
Check with the below link. Let me know if its working fine with you.
Fiddle
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<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>
THEONEEYENICKY'SWEB
</div>
<!-- Menu Item -->
<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>
</div>
Missing this three file add this all and try
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
Related
This question already has answers here:
Bootstrap, jQuery, Popper, and CSS load order
(2 answers)
Closed 4 years ago.
I am trying to create a basic bootstrap navigation menu with a toggle button.
When the screen size is reduced, the navigation links hide as they should but the toggle button does not display. Why is this happening? Can someone help me figure this out? Thanks!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<title>Stack</title>
<style type="text/css">
#nav {
background-color: yellow;
}
</style>
</head>
<body class="sidebar-collapse">
<nav class="navbar navbar-expand-md navbar-primaryfixed-top" id="nav">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Stackoverflow
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#test">
asdd
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicesarea">
dsdsas
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutme">
daasdsda
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#getintouchdiv">
afdfdf
</a>
</li>
</ul>
<button class="btn navbar-btn ml-2 text-white btn-success">
Sign in
</button>
</div>
</div>
</nav>
</body>
</html>
External links will be appreciated too.
Please use this code for simple bootstrap navbar
<!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>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
I have tried out the following code and for some reason my background image doesn't take up the whole page and it only covers the navigation bar. What should I change in the following code? Also how can I make the navigation bar span the whole width of the web page?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Static Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.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.5/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="container" style="background-image:url('tp.jpg');">
<div class="bs-example">
<nav id="myNavbar" class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">TNP</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Companies<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown">
<li>Rakuten</li>
<li>Morgan Stanley</li>
<li>TCS</li>
<li>Nvidia</li>
</ul>
</li>
<li class="dropdown">
Student <b class="caret"></b>
<ul class="dropdown-menu">
<li>Login</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
Use the class container-fluid instead of container to make it use entire width.
And the container needs to be given a height. Currently it will simply grow as you will add more elements inside it.
Here's the FIDDLE.
when i am using bootstrap col-md-offset-2, then the horizontal scroll bar appearing in window view as well as mobile view. I don't know how this horizontal scroll bar appear in my website.
please help me.
thank you...
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/norwich.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- header -->
<div class="row">
<div class="col-md-offset-2 col-md-8">
<header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<div class="container">
<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>
<h1>LOGO</h1>
</div>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a >HOME</a></li>
<li><a >ABOUT</a></li>
<li><a >SKIP HIRE</a></li>
<li><a >CONTACT</a></li>
</ul>
</div>
</nav>
</header>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Surround all your code with
<div class="container-fluid"></div>
Here is a JSFiddle demo
Hi when you dont have a container behind the
<div class="row"></div>
It will at a negative margin.
So you can do this instead.
<!-- header -->
<header>
<nav class="navbar navbar-inverse col-md-offset-2 col-md-8" role="navigation">
<div class="navbar-header">
<div class="container">
<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>
<h1>LOGO</h1>
</div>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a >HOME</a></li>
<li><a >ABOUT</a></li>
<li><a >SKIP HIRE</a></li>
<li><a >CONTACT</a></li>
</ul>
</div>
</nav>
</header>
I'm just beginning with twitter bootstrap 3.
I just made this fixed navigation bar, but it doesn't seems to be working.
The navbar isn't fixed.
Here's the code.
What am I doing wrong ?
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700,400italic,700italic&subset=latin,latin-ext,greek' rel='stylesheet' type='text/css'>
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- ========== -->
<!-- = Logo = -->
<!-- ========== -->
<div class="span7">
<a class="brand" href="index.html">
<span class="pacifico">Webmarket</span>
</a>
</div>
</div>
<!-- ============= -->
<!-- NavBar -->
<br>
<div class="container-fluid">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Live Link :- http://robocorp.in/design/
Any suggestions are welcome.
<div class="navbar navbar-default navbar-fixed-top navbar-main">
<div class="container">
<div class="row">
<div class="col-md-15 col-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Try this and let me know. You have way too many span icon bars for the support for other devices, so I removed a couple.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
These don't exist on your webserver. I suggest putting the CSS In a folder called "assets" and then refering to them like so:
<link href="/assets/bootstrap.min.css" rel="stylesheet">
<link href="/assets/main.css" rel="stylesheet">
and the same with the JS
<!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>Bootstrap 101 Template</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700,400italic,700italic&subset=latin,latin-ext,greek' rel='stylesheet' type='text/css'>
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
<div class="row">
<a class="brand" href="#">Test</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
I'm working with the new Bootstrap 3 and everything works fine, except dropdowns that I want to create. Please note me if someone knows what I'm doing wrong. Here is the source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-brand">Tech Site</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Blog</li>
<li class="dropdown">
Social Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>StumbleUpon</li>
<li>Google+</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-brand">Tech Site</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Blog</li>
<li class="dropdown">
Social Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>StumbleUpon</li>
<li>Google+</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>