The navbar button is just not appearing i don't know whats wrong.
I am sure that the code is correct i even have jquery file.
This is the code:
<!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/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
</body>
</html>
Your code doesn't make any sense. Can you adjust this for yourself and try it ? The navbar toggler also needs to have a specific width value to appear.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">***Your İmg Here***</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>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
You have used navbar-expand-md class in your nav element because of that your toggle is only visible in resolution smaller than 768px and for higher resolution you can use navbar-expand-lg or navbar-expand-xl classes. If you want to keep it visible in all screen just remove the class navbar-expand
<body>
<header>
<nav class="navbar navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</header>
Related
I currently have a very minimal navbar set up with Bootstrap 5.
With navigation bars, there is both the 'navbar-brand' and nav links.
I want my brand/logo to be all the way on the far left, while all the navbar-nav links to be all the way to the right.
This could be achieved with flexbox and justify-content-between
However I have 0 clue where the navbar flex properties come into play, so therefore I am not sure where or what to change to achieve this effect
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/brand.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</div>
</nav>
Is this what you want ? Indeed, justify-content-between is very useful for that. You have to use this style for the parent div and to put the children elements you want inside it.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body>
<nav
class="navbar d-flex justify-content-between fixed-top navbar-expand-lg navbar-light bg-light p-2"
>
<a class="navbar-brand align-self-center" href="#"><img src="images/brand.png" /></a>
<button
class="navbar-toggler align-self-center"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav text-end pe-1">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact Us</a>
</div>
</div>
</nav>
</body>
</html>
This question already has answers here:
How to align nav items to the right in Bootstrap 5?
(7 answers)
Closed 2 years ago.
I'm trying to setup a navbar where the links would be to the right when screen is large enough and the bar is not collapsed. However, despite having ml-auto included as the class in the unordered list (ul) tag, the links (Contact, Pricing, Download) are still stuck to left next to the Brand item. How do I fix this? The following is the code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<section id="title">
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="w-100">
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>
Hi Gokulan,
Let's use the mr-auto instead on the <ul> tag to move the elements to the right. If is possible, please use the code I am providing you with on this post. Don't forget to run it in full page if you test this snippet first on stackOverflow to see the results. I certainly hope this helps, pal!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
My code for navbar toggler is not working even after many attempts it shows the button but doesn't expand for the list and even for the desktop screen, it shows the toggle. Please Help
Edit-1: After adding https {before HTTP in jquery link} the toggle gets quickly collapsed, it is not holding the expanding form.
<head>
<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">
<title></title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ol class="navbar-nav ml-auto">
<li class="navbar-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ol>
</div>
</nav>
</body>
</html>
Simple change HTTP to HTTPS for bootstrap.js resource. And changed version of that.
<head>
<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">
<title></title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ol class="navbar-nav ml-auto">
<li class="navbar-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="#">Profile</a>
</li>
</ol>
</div>
</nav>
</body>
</html>
I can't get the bootstrap toggle button to work on the browser, how can I identify the problem?
PS I have already added the Bootstrap CDN in my head tag and have added the jQuery and JavaScript in the body.
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
NAVBAR
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="#navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
The id attribute should not start with #. It should just be: id="navbarSupportedContent"
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
NAVBAR
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
https://www.codeply.com/p/xYH3DTrwlt
Try this
remove .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
<!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/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
ABOUT
</li>
<li class="nav-item">
TICKETS
</li>
</ul>
</div>
</nav>
</body>
</html>
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js.
popper.js.org
This is written in the Bootstrap documentation)))
data-target="#navbarSupportedContent"
The # sign stands for the id.
The issue is here:
id="#navbarSupportedContent"
This should be
id="navbarSupportedContent"
I'm using a Bootstrap navbar and have customised it but when the responsive size moves to mobile the burger menu opens on the left side but I would like it on the right. Can anyone help?
http://stajniazkopyta.x10host.com/test.html
Html -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Caveat">
<title>Stajnia Z Zopyta</title>
<style>body {background-color: black;}</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-none">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active nav-link-camps">
<a class="nav-link" href="#">Camps</a>
</li>
<li class="nav-item active nav-link-sales">
<a class="nav-link" href="#">Sales</a>
</li>
<li class="nav-item active nav-link-gallery">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item active nav-link-contact">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Css -
.navbar{
border-bottom: $lobster-yellow 3px solid;
}
Just change the order of the navbar-brand and collapse button. In Bootstrap V4 for navbar, they have used display: flex; property. By using this content may align like a table-cell. When the device size below 768px, collapse menu gets visible, so the content aligns in order.
Another way is to apply flex-direction: row-reverse; to the navbar when it is below 768px using Media Queries. By this method, you are not needed to change the order from your code, which is in your question.
My Suggestion
My suggestion is to re-order the HTML lines as I give in the Updated Code. Because we don't need to add custom CSS to override the default Bootstrap framework.
Your Code
//Collapse Button
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
//Nav brand
<a class="navbar-brand" href="#">Navbar</a>
Updated Code
//Nav brand
<a class="navbar-brand" href="#">Navbar</a>
//Collapse Button
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
Image For Reference