The navbar that I'm creating has its brand showing, however the links will not appear. The toggle button appears when shrinking the screen, but still no links appear when I click the button.
import React from "react";
function Navbar()
{
return(
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" >Demo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="navbarText" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse nabar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Menu<span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Navbar;
Never mind I was missing a "v", insert facepalm.
Related
I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
Plain navbar from bootstrap 5 docs is used.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">¿qué es?</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Acciones subvencionables</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Nuestro equipo</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Contacta con nosotros</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Recursos y más información</a></li>
</ul>
</div>
</div>
</nav>
Bootstram.min.css at top of page. No extra css used, and jquery is placed at the bottom of my page.
There are no console errors.
By the way, using laravel.
I cant seem to find any reason for not dropping down/collapse my hamburger.
Thanks in advance
Sorry if anyone got on research it was a dumb error.
bootstrap css was placed prior to styles.css
Thanks anyway
As a relative newbee to Bootstrap I have been trying to code a menu with dropdowns. Code is listed below, but I find some issues:
The menu code was copied from GetBootstrap.com docs. Looked at other sites to see where the problem may be, tried alternatives but no luck.
bootstrap.min.css and bootstrap.bundle.min.js, both version 5, have been linked in to the code. Have tried these files directly on site and via links. Also tried popper.js plus bootstrap.min.js; same result.
Direct links do work, but the dropdown part does not. Clicking on the dropdown item produces nothing. It would be great if it would show on hover and stay in place so that sub-items can be clicked.
The menu should be on the righthand side of the screen; looking at answers, ms-auto should do this. It does not.
When the screen is collapsed to tablet or phone size, the menu goes to the expected compressed symbol, but does not function at all; it will not show anything when clicked.
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item" dropdown>
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
dropdown should be a class .. not an attribute:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="//via.placeholder.com/160x48" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Everything works as expected
Using CDN to integrate Bootstrap 5.0.0-beta3 resources, following should work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Custom Navbar with <strong>Bootstrap 5.0.0-beta3</strong></title>
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
I hope, this will help you out!
Feel free to Upvote the answer
Thank you both to Manifest Man and Zim. I was using an earlier version of bootstrap 5 and when the latest version of bootstrap.min.css and bootstrap.bundle.min.js were used it started to work.
In addition, yes, dropdown is a class, not an attribute.
I'm trying to make my dashboard app more dynamic by adding a collapsable navbar. The nav should resize to only icons, and the main area should expand. But I'm kind of stuck on how to expand it from now on.
The project is based on the PHP Laravel framework 5.6.
I have tried different setups with grid columns.
<div class="container-fluid" id="wrapper">
<div class="row">
#include("test.components.sidenav")
<main class="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
<div class="container-fluid" id="expandable">
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2" id="collapseId">
<h1 class="site-title">
<a href="{{ route('home') }}">
<em class="fab fa-accessible-icon"></em>
<span>Ready4It</span>
</a>
</h1>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
<em class="fas fa-bars"></em>
</a>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item">
<a class="nav-link active" href="">
<em class="fas fa-home"></em>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fas fa-ticket-alt nav-bar-icon"></em>
<span>Ticket overzicht</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-chart-line"></em>
<span>Statistieken</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-envelope"></em>
<span>Mail monitoring</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<em class="fas fa-clock"></em>
<span>Uren invoer</span>
</a>
</li>
</ul>
<a href="#" class="logout-button" id="logout-button">
<em class="fa fa-power-off"></em>
<span>Logout</span>
</a>
</nav>
<section class="row">
<div class="col-sm-12">
<div class="row">
#yield("content")
</div>
</div>
</section>
</div>
</main>
</div>
</div>
<script>
/* This script is for the mobile navbar collapse */
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-collapse").click(function (e) {
e.preventDefault();
$("#collapseId").toggleClass("icons-only");
$("#logout-button").toggleClass("logout-button").toggleClass("logout-button-collapsed")
})
</script>
The nav should resize to only icons, and the main area should expand.
Try this one,
Add a fixed width to the class icons-only also adjust transform translate if needed
.icons-only {
width: some-width;
}
and also make sure you added same width as margin-left for main section ( apply this only if the icons-only class is added to nav )
First ever question on here so go easy... (can you smell fear through the internet??) Okay, so my dropdown menu works fine in a desktop size viewport but viewing it through developer tools in mobile size it gets clipped and won't extend beyond the bottom of the nav div. What gives, yo? Here's the code, which I understand is the accepted protocol...
<!--start of navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid"><!--stretches navbar full width of screen-->
<div class="navbar-header">
<!--hamburger collapse menu-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span><!--sr-only is for people with vision impairment-->
<span class="icon-bar"></span><!--triple lines on burger menu-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="homelink navbar-brand" href="#">Michael Amos</a>
</div> <!--/nav header-->
<div class="collapse navbar-collapse"> <!--make navbar list collapse when resize for small screen-->
<ul class="nav navbar-nav navbar-right"><!--applies bootstrap styling to float navbar items right-->
<li>about</li>
<li>contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">work<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>example 1</li>
<li>example 2</li>
<li>example 3</li>
</ul>
</li>
<li>FAQ</li>
</ul>
</div> <!--/nav collapse-->
</div> <!--/container-fluid-->
</nav> <!--/navbar-->
Muchas gracias!