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"/>
Related
I've written a sidebar using Bootstap 5 which is placed on my _Layout view. The issue I'm having is when I load a new page like a users view, initialy it looks great, until I resize my screen and then the content on the users view slides behind the sidebar. I've tried placing the sidebar in a new column and row, etc but nothing I do seems to fix this. Below is my sidebar code, any help on this issue will be greatly appreciated.
<!-- Side Nav-->
<div class="container-fluid">
<div class="row">
<nav class="sidebar card py-2 mb-4 col-2 float-start vh-100 rounded-0 position-fixed" style="background-color: rgb(95,131,183);
width: 250px; padding-left: 0px; padding-right: 0px">
<ul class="nav flex-column" id="nav_accordion">
<li class="nav-item border-bottom">
<a class="nav-link bi bi-house" asp-area="" asp-controller="Home" style="color:whitesmoke; padding-left: 10px"> Home </a>
</li>
<li class="nav-item border-bottom">
<a class="nav-link bi bi-gear" href="#" style="color:whitesmoke; padding-left: 10px"> Settings </a>
</li>
<li class="nav-item border-bottom">
<a class="nav-link bi bi-speedometer" href="#" style="color: whitesmoke; padding-left: 10px"> Dashboard </a>
</li>
<li class="nav-item has-submenu border-bottom">
<a class="nav-link bi bi-people" href="#" style="color: whitesmoke; padding-left: 10px"> Contacts </a>
<ul class="submenu collapse" style="padding-left: 0px; padding-right: 0px">
<li><a class="nav-link" asp-area="" asp-controller="Users" asp-action="UsersIndex" style="color: whitesmoke"> Users </a></li>
<li><a class="nav-link" href="#" style=" color: whitesmoke"> Customers </a></li>
<li><a class="nav-link" href="#" style=" color: whitesmoke"> Suppliers </a></li>
</ul>
</li>
#* <li class="nav-item">
<a class="nav-link" href="#"> Something </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Other link </a>
</li>*#
</ul>
</nav>
</div>
</div
Many thanks
AJ
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 want to create nav-bar under nested Dropdowns in Aurelia using Materialize.I tried very much.
<span repeat.for="item of menuItems">
<ul id="${item.target}" data-beloworigin="true" class='dropdown-content nested' if.bind="item.type==3" role="menu">
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class.bind="item.class"role="button" aria-haspopup="true" aria-expanded="false" href='#' data-target="${item.target}" data-hover="hover" data-alignment="left" > Secondary ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url"> ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
<ul if.bind="item.type==3" id="${item.target}" class='dropdown-content' >
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" role="button" aria-haspopup="true" aria-expanded="false"> ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url" > Third ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
</span>
<nav class="navbar-default d-flex align-items-center">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down" >
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class='dropdown-button btn' beloworigin="true" data-target="${item.target}" role="button"
aria-haspopup="true" aria-expanded="false" >${item.label}
</a>
</li>
</ul>
</div>
</nav>
menuItems is getting menus from Menu.ts file.
Type 3 is using for Parents Menu
Type 0 is menus which will be executed to URL by click dropdown Menu
I want when this code run then menu bar should create in which I click on the dropdown then related sub-menu should be open.
After Some modification My code is working now.
<span repeat.for="item of menuItems">
<ul id="${item.target}" class='dropdown-content' if.bind="item.type==3" class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==3" href="#" class='dropdown-button' data-hover="hover" data-alignment="left"
data-target="${item.target}" href='#'> Secondary ${item.label}
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
<ul id="${item.target}" class='dropdown-content' class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
</li>
</ul>
</li>
</ul>
</span>
<nav class="navbar-default row mb-0 d-flex align-items-center">
<div class="nav-wrapper col s12">
<i class="icon icon-propriete"></i>
<ul class="right hide-on-med-and-down">
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class="dropdown-trigger" data-target="${item.target}">${item.label}
</a>
</li>
</ul>
</div>
</nav>
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 )