I have navbar with mobile navbar-toogler, but, this is not working. I'm using material-kit, and this is on my website. I'm want using this, because this is very cool css.
<head>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link href="https://hamsterofficial.eu/css/material-kit.css?v=2.0.4" rel="stylesheet"/>
<head>
<nav class="navbar navbar-color-on-scroll fixed-top navbar-expand-lg" color-on-scroll="100" id="sectionsNav">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="">TEST WEBSITE </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
test link
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Autors
</li>
<li class="nav-item">
<i class="material-icons">input</i> Sign up
</li>
</ul>
</div>
</div>
</nav>
<script src="https://hamsterofficial.eu/js/core/jquery.min.js" type="text/javascript"></script>
<script src="https://hamsterofficial.eu/js/core/popper.min.js" type="text/javascript"></script>
<script src="https://hamsterofficial.eu/js/core/bootstrap-material-design.min.js" type="text/javascript"</script>
Related
I'm trying to create a website using bootstrap and while using the navbar component, I'm facing an issue where in when the screen shrinks to the breakpoint I've set (which is lg) the hamburger icon's alignment gets disrupted as seen below.
Can someone please let me know why this is happening and what is the best way to fix this issue? Thanks in advance
<html>
<head>
<title>Johns's Portfolio</title>
<!-- Linking custom CSS file -->
<link rel="stylesheet" href="./index.css">
<!-- Linking Bootstrap -->
<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">
<span class="navbar-brand fw-bold">John Doe</span>
</div>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#ToggleMenu" aria-controls="ToggleMenu" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="ToggleMenu">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Work
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Education
</li>
<li class="nav-item">
Testimonials
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
<!-- Bootstrap Javascript files-->
<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>
I'm also attaching a picture of the issue:
Your problem is you put your button outside of container
<div class="container">
<span class="navbar-brand fw-bold">John Doe</span>
</div>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#ToggleMenu" aria-controls="ToggleMenu" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
It needs to be like this
<div class="container">
<span class="navbar-brand fw-bold">John Doe</span>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#ToggleMenu" aria-controls="ToggleMenu" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
You can try this fix
<html>
<head>
<title>Johns's Portfolio</title>
<!-- Linking custom CSS file -->
<link rel="stylesheet" href="./index.css">
<!-- Linking Bootstrap -->
<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 navbar-dark bg-dark">
<div class="container">
<span class="navbar-brand fw-bold">John Doe</span>
<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" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
About
</li>
<li class="nav-item">
Work
</li>
<li class="nav-item">
Projects
</li>
<li class="nav-item">
Education
</li>
<li class="nav-item">
Testimonials
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
<!-- Bootstrap Javascript files-->
<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>
I am trying to implement a Navbar toggler referring the Bootstrap v5.1 documentation. I want to display the brand name on the left and the toggler on the right. Though this code is displaying the same but when I click the toggler the drop down menu is not showing and I am unable to figure out where the problem lies. How can I fix this?
Here's the code:
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">Navbar</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">
<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>
</nav>
</body>
Here's the image of the working of the code
Your code is perfect. But you forget to connect JavaScript in your code.That's why the Navbar toggler isn't working perfectly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="">Navbar</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">
<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>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
Linked HTML file with bootstrap-v5, copied exact code from documentation.
Toggle button on the right not revealing "nav-item".
<!DOCTYPE html>
<html>
<head>
<title></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-sm bg-dark navbar-dark"> <!--class of bootsrap -->
<a class="navbar-brand" style="padding-left: 10px;">Code Decipher</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">
<a class="nav-link" href="">Content</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>
</nav>
</body>
</html>
Have you link bootstrap JS file ?
<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>
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'm unable to open the hamburger menu while using bootstrap. Would somebody please tell me what the issue is with the code?
I've pulled the code directly from the bootstrap website. I've looked at others' questions regarding this problem, but the suggested solutions haven't helped.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="200" height="200" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
</div>
</nav>
Please explain this for me very simply, as I'm new to coding. I want to be able to open the hamburger menu on a mobile device.
data-target and the id were not the same.
You need the jquery and bootstrap.js for the dropdown to work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<a class="navbar-brand" href="index.html">
<img src="logo.png" width="50" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
for people looking for a solution in bootstrap 5, you should replace data-target with data-bs-target.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#forum_navbar"
aria-controls="forum_navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Thank you all so much! This really helped.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact </a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<h1>HEY HEY HEY!<br/><i class="fas fa-yin-yang fa-spin"></i></h1>
</div>
</nav>
Sometimes people only import Bootstrap CSS CDN link. They need to be import JavaScript SDN link also for the Hamburger menu etc.
Something to note is the # in data-bs-target which references the id. I didn't notice this small element in the beginning and the hamburger menu wasn't working when clicked.