What I want to achieve, is to make the collapsible button appear only in mobile view.
This is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<!--Nav bar-->
<nav id="header-nav" class="navbar navbar-default">
<div class="container-fluid">
<!--content inside navbar-->
<div class="navbar-header">
<h1>Food, LLC</h1>
</div>
<!--collapsible button for mobile users-->
<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>
</div>
</nav>
</header>
<script src="jquery/code.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I am using the Twitter Bootstrap CSS Framework 4.5.3 in this case.
My actual output:
As you can see, a small line is visible in the right side, irrespective of the display size (mobile, tablet or desktop).
Which version of bootstrap are you using ?
Try adding these classes to your collapsible button .d-block .d-sm-none.
Check the bootstrap doc here which explains the display properties.
Or a better solution, use the .navbar-expand{-sm|-md|-lg|-xl} within your navbar.
If you were using bootstrap 4, you had several problems in using the nav component
Edit with code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<!--Nav bar-->
<nav id="header-nav" class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Food, LLC</a>
</li>
</div>
</nav>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Related
I have tried to include navigation bar with toggler. The code is working fine in codeply but not in browser. The toggler button (hamburger button) is appearing when in mobile but not showing the lists. Below is my code.
<html>
<head>
<title>Practice</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">WonderWeb</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">Contact</li>
<li class="nav-item">Products</li>
<li class="nav-item">Payment</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Many of Bootstrap 5 components require the use of JavaScript to function.
You forgot to include special links from Bootstrap 5 and You had wrong id in here
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
It should be like this =>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
Now it's works perfectly ;-) Best regards!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Solved ;-) </title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">WonderWeb</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">Contact</li>
<li class="nav-item">Products</li>
<li class="nav-item">Payment</li>
</ul>
</div>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"
></script>
</body>
</html>
My nav-bar drop-down menu button is not working?
I am trying to work with the nav-bar button as shown in the code
below. I have attached the code of my index.html and styles.css file. Someone,
please help me regarding this. The drop-down menu us not appearing
.navbar-brand h1 {
margin: 0;
font-size: 25px;
float: left;
}
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, intial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/jquery-3.5.0.min"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<title>Module 3 Solution</title>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header ">
<a href="index.html" class="float-sm-left visible-md visible-lg">
<div id="logo-img" alt="logo"></div>
</a>
<div class="navbar-brand" class="float-left">
<a href="index.html">
<h1>Food, LLC</h1>
</a>
</div>
</div>
<div class="navbar-header">
<span class="navbar-toggler-icon"></span>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav visible-xs">
<li>Chicken</li>
<li>Beef</li>
<li>Susuhi</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
</body>
</HTML>
EDIT: Try moving your JQuery and Bootstrap JS files to right above the </body> tag (leave the Bootstrap CSS in the <head>).
I have made a Codpen for you. This is the base code from Bootstrap's documentation. I've swapped in some of the custom code you had (and removed the repeated code) and it's working there with the minimum code, so if it still doesn't work for you, there is code somewhere else that needs changing.
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="float-sm-left" href="index.html">
<h1>Food, LLC</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 visible-xs">
<li class="nav-item">Chicken</li>
<li class="nav-item">Beef</li>
<li class="nav-item">Susuhi</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
I am new to bootstrap and was trying to create navbar but it didn't work. I wasn't even trying to add any item in it. I was only trying to put my company's/brand's name in it. I have bought an online course and there the teacher uses the same code and it works for him.
This is the code. Please help me through this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Navbar is cool!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
Google
</div>
</nav>
</body>
</html>
Use this code instead...
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Google</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</body>
</html>
if you just want to add one reference in Navbar this will do::
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Google</a>
</nav>
maybe this is the code you were looking for.
check :https://jsfiddle.net/sugandhnikhil/frcvu2d8/
Im using tomcat 9, java, bootstrap to develop a online forum. Suddenly the navigation is not working, i tried a few things but no luck. In the chrome network inspector tab everything seems fine.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="static/css/myCss.css" rel="stylesheet">
<meta charset="UTF-8">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/customIndex.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<title>Index</title>
</head>
<body>
<nav class="navbar navbar-default">
<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=".navbar-collapse" 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 class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Index</li>
<li>Profile</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
screenshot:
localhost:screenshot
Perhaps the path to your bootstrap.min.css is collapsed? I just added this link to your header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> and pointed to the data-target="#bs-example-navbar-collapse-1". It seems working now.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="static/css/myCss.css" rel="stylesheet">
<meta charset="UTF-8">
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/customIndex.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Index</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Index</li>
<li>Profile</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The navbar is not working because of some problem with bootstrap itself.
Bootstrap's current version at the date of posting this answer is 4.3.x and it seems to be having some problems.
The navbar is not working properly and neither is .page-header(page-header class. And I'm not sure if other stuff is working fine in this version).
Also the CDN for minified bootstrap css <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> that is on bootstrap's website doesn't work correctly either.
The solution is using older version (version 3.3.5 I know works correctly) of bootstrap which I know is not an efficient solution, but it works.
Or you can use this CDN for minified bootstrap css <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> . It will work fine.
What I am trying to achieve is that I've got a custom file that is supposed to override the default bootstrap css. ( It is supposed to change the navbar menu color, navbar background etc ).
P.S. I am using EJS with Node 5.7.1.
Nevertheless, I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Strawberio</title>
<meta name="description" content="">
<meta name="author" content="">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/b/jquery/dist/jquery.min.js"></script>
<script src="/c/g.controller.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/a/layout/style.css"
<nav class="navbar navbar-default">
<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="#">Strawberio</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</head>
<body>
<div ng-app="stack">
<%- body %>
</div>
</body>
</html>
But if you look at this specific line:
<link rel="stylesheet" href="/a/layout/style.css"
The Link tag does not end... however... it works.
If I do close the link tag as following:
<link rel="stylesheet" href="/a/layout/style.css">
The custom file does not override the default bootstrap. It loads it but it does not override.
Do you have any idea why?
Thank you,
Alexandru S.
Your <nav> tag is improperly nested in your HTML <head> tag. Move the nav to inside the <body>. The <head> should only contain <title>, <style>, <meta>, <link>, <script>, and <base>.
You have errors open a closing the head a body tags. You should always put your content inside body tag not in the head tag!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Strawberio</title>
<meta name="description" content="">
<meta name="author" content="">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/b/jquery/dist/jquery.min.js"></script>
<script src="/c/g.controller.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/a/layout/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<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="#">Strawberio</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<div ng-app="stack">
<%- body %>
</div>
</body>
</html>