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.
Related
I got a sample code of a navigation bar from w3schools.com. It is using bootstrap. Here is the code:
<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">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
This navbar is working perfectly fine.
But for small screens(case of collapsible navbar) I want the navbar to collapse when I click on an option in it. So, I added data-toggle="collapse" data-target="#myNavbar" in all the <li>. Now the navbar is properly toggling for small screens.
Here is a vid of the issue:
Here is the modified code:
<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"><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 1</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
But now, the whole navbar is glitching for large screens(desktop). Please help in resolving this.
Do point out if this is replication, as I am not able to find that.
The final HTML code that is glitching for desktop screens is down below(same problem in google-chrome, firefox, brave):
<html>
<title>Example</title>
<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.4.1/css/bootstrap.min.css">
<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>
<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"><a data-toggle="collapse" data-target="#myNavbar" href="#">Home</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
<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>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
</body>
</html>
Click on expand snippet to see the glitch on the desktop screen.
There's a better way to collapse the navbar! Why not include some lines of JS as you are already using jQuery, like this-
$('.navbar-nav>li>a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
<title>Example</title>
<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.4.1/css/bootstrap.min.css">
<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>
<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">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<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>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
</body>
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 am currently working on a band page and having issues with the navbar. I want the navbar to be black to match the logo of the band, but can't seem to change the background color despite trying it with all of the relevant classes on my css page.
<nav class="navbar navbar-default">
<div class="container">
<!-- 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="#bs-example-navbar-collapse-1" 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="index_thekatellas.html">
<img src="katellas.jpg">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Tour Dates</li>
<li>Band</li>
<li>Music</li>
</ul>
</nav>
You should use
<nav class="navbar navbar-inverse">
It will look your nav bar black.
default is white so inverse is black.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My exam</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>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
</html>
I want to achieve html layout something like this, using Twitter bootstrap
i want it to be responsive, in both mode, desktop and mobile, like example below
desktop mode
mobile mode
This is code I tried so far
<!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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">
<img src="https://i.stack.imgur.com/G2Xgp.png">
</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li><a href='#'>FR</a></li>
<li><a href='#'>EN</a></li>
<li><a href='#'>KR</a></li>
</ul>
</div>
<!--/.nav-collapse -->
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right" role="menu">
<li><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT US</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
<li><a href='#'>TEST</a></li>
</ul>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
Any help appreciated
try this...! may be this will help you..! i have added some custom css in head, take a look..!
<!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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar{
background: #540d1f;
padding: 25px 0;
}
.container-fluid{
background:#bcaa60 !important;
}
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-brand{
position: relative;
top: -45px;
}
#media only screen and (max-width: 767px) {
.navbar-brand{
position: relative;
top: -45px;
left:30%;
}
}
</style>
</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="#">
<img width="90px" src="https://i.stack.imgur.com/G2Xgp.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</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>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>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
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>