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
Related
I have a collapse class applied on navbar but it is not working well. The button gets clicked but menu is not displayed.
Following is the code for the complete navbar:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-fire"></span>Responsive Design</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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" style="text-decoration:none;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="text-decoration:none;">Link</a>
</li>
<li class="nav-item dropdown">
<a style="text-decoration:none;" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Web Design</a></li>
<li><a class="dropdown-item" href="#">IOS Development</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">SEO</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="navbar-form navbar-right d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Bootstrap 5 contains data-bs-toggle instead of data-toggle.
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.
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.
I am not sure how is this happening. On my landing page, I've got a simple statement that returns the user information by using the method "Auth::user()" and alas, it works.
Nevertheless, when applying a layout to my file, I get the "Trying to get property of non-object" exception. I've been playing with it a little then I made it so I can keep the session, but after reloading or moving to another page (which use the same layout, by the way), the session immediately closes itself.
What could be the issue behind this behaviour?
Update: I've found the problem. It seems to be this layout in particular which sets a navbar; it has an iframe that I thought was the problem, but when removing the iframe content (which is inside a modal, that I remove as well), the error keeps hapening - It closes the user's session and throws the exception.
#yield('nav')
<nav class="navbar navbar-dark bg-dark navbar-expand-lg sticky-top">
<a class="navbar-brand" href="/">Printed</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 mr-auto">
<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="#">Conóce</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-toggle="modal" data-target="#contacto">Contacto</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Catálogo
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/productos">Productos</a>
<a class="dropdown-item" href="/servicios">Servicios</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Promociones</a>
</div>
</li>
<li class="nav-item">
Portafolio de Proyectos
</li>
</ul>
#if(Auth::check() == false)
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Ingresar</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{route('login')}}">Iniciar Sesión</a>
<a class="dropdown-item" href="{{route('register')}}">Registrarse</a>
</div>
</li>
#endif
#if(Auth::check())
<li class="nav-item">
Hello, {{Auth::user()->email}} !
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Opciones</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="">Panel de Usuario</a>
<a class="dropdown-item" href="{{Auth::logout()}}">Cerrar Sesión</a>
</div>
</li>
#endif
</div>
</nav>
Edit: Good news, I've discovered my issue. It seems to be this part in particular that somehow "triggers" itself. Could it be that I'm missing a closure on the tags somewhere?
<a class="dropdown-item" href="{{Auth::logout()}}">Cerrar Sesión</a>
I'm trying to align the icon vertically centered to the text in the nav bar items.
I tried using align-middle to the nav-link since both text and image are there, but did not work.
Align-top to the img only moves the element to the top, but does not work when doing align-middle to the img.
Finally, I only achieved what I wanted adding margin-bottom to the img, but do not want to use that, What is wrong with align-middle?
<ul class="navbar-nav mx-auto w-100 ">
<li class="nav-item">
<a class="nav-link align-middle" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/tuerca/B Tuerca GRAY.svg" class="iconos" alt="tuerca">
<h4 class="d-inline">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link align/middle" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="d-inline">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link align-middle" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">test 3</h4>
</a>
</li>
</ul>
A part of the problem is that in Bootstrap 4 <h4> elements have a bottom margin defined by default. You can eliminate that by setting .my-0 on them.
Then to make the icon and the text vertically aligned, use .d-flex .align-items-center on the .nav-link elements. This way you can remove .d-inline from <h4> as well.
<ul class="navbar-nav mx-auto w-100 ">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/tuerca/B Tuerca GRAY.svg" class="iconos" alt="tuerca">
<h4 class="my-0">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="my-0">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="my-0">test 3</h4>
</a>
</li>
</ul>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>