I'm at my wits end. I started up a new ASP.Net core web app and am trying to add a simple menu with a dropdown. However, the dropdown won't toggle open.
(And when is stackoverflow going to remove the ridiculous "issue" of you need more content to match the amount of code you're posting. Sometimes a question is short! Thanks!)
The dropdown:
<li class="nav-item dropdown">
<a class="nav-link text-dark dropdown-toggle" data-toggle="dropdown" asp-area="">Json</a>
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="nav-link text-dark" asp-area="" asp-page="LoadJson">Load Json</a></li>
<li><a class="nav-link text-dark" asp-area="" asp-page="BulkLoadJson">Bulk Load Json</a></li>
</ul>
</li>
All the code in the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - DataMagnifierAdmin</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/DataMagnifier_Admin.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">DataMagnifierAdmin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="ExecETL">Execute ETL</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link text-dark dropdown-toggle" data-toggle="dropdown" asp-area="">Json</a>
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="nav-link text-dark" asp-area="" asp-page="LoadJson">Load Json</a></li>
<li><a class="nav-link text-dark" asp-area="" asp-page="BulkLoadJson">Bulk Load Json</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - DataMagnifier_Admin - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Change data-toggle="dropdown" (Bootstrap 4) to data-bs-toggle="dropdown" (Bootstrap 5).
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<li class="nav-item dropdown">
<a class="nav-link text-dark dropdown-toggle" data-bs-toggle="dropdown" asp-area="">Json</a>
<span class="caret"></span>
<ul class="dropdown-menu">
<li><a class="nav-link text-dark" asp-area="" asp-page="LoadJson">Load Json</a></li>
<li><a class="nav-link text-dark" asp-area="" asp-page="BulkLoadJson">Bulk Load Json</a></li>
</ul>
</li>
Related
I am doing simple web app in ASP.NET and I want to show options from dropdown menu, but it does not show any options. In another app I did at school, it worked perfectly.
Here is my code that does not work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Blogic Project</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
#await RenderSectionAsync("Styles", required: false)
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Blogic Project</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
#{
#if (User.Identity.IsAuthenticated == false)
{
<ul class="navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link text-light" asp-area="Security" asp-controller="Account" asp-action="Register"><span class="glyphicon"></span> Sign Up</a></li>
<li class="nav-item"><a class="nav-link text-light" asp-area="Security" asp-controller="Account" asp-action="Login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Logged as #User.FindFirstValue(ClaimTypes.Name)</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li class="nav-item"><a class="nav-link text-light" asp-area="Security" asp-controller="Account" asp-action="Logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</li>
</ul>
}
}
</div>
</div>
</nav>
</header>
<div class="parallax">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top noparallax-footer footer text-muted bg-dark border-bottom box-shadow">
<div class="container">
© 2022 - BlogicProject - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
The problem is in this tag:
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Logged as #User.FindFirstValue(ClaimTypes.Name)</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li class="nav-item"><a class="nav-link text-light" asp-area="Security" asp-controller="Account" asp-action="Logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</li>
</ul>
Wanted output from another project:
I am still a student and it's the second time that I make something in ASP.NET.
Thank you.
EDIT: tried adding jquery before bootstrap and still does not work.
EDIT2: works with that change
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"> </script>
You have to refer to jQuery before Bootstrap.
You could see the two results:
I've been banging my face against my monitor for hours trying to figure out this issue that seemingly no one else is experiencing, so here we are.
I'm learning ASP.NET and working on using themes from bootswatch in my CSS folder. The bootswatch and bootstrap versions are the same (5.1.3), but the code is broken anywhere that involves a variable in the CSS file that I brought in. I'm only going to be using screenshots in this post because the files are huge and the error is what's important.
Additional info:
All packages/extensions are up to date, all variables are declared and initialized in the CSS file, and here is a link to the theme I'm trying to use: https://bootswatch.com/darkly/
Thanks for any help anyone can provide.
and my _Layout file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>#ViewData["Title"] - LearningAspNetWebApp</title>
<link rel="stylesheet" href="~/css/darklyTheme.css"/>
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
</head>
<body>
<header>
<!-- The following is copied and pasted from bootswatch Solar theme to trick out the nav bar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Category" asp-action="Index">Category</a>
</li>
#*<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>*#
</ul>
<form class="d-flex">
<input class="form-control me-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- End Trick Out-->
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LearningAspNetWebApp - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<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>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
And here is my folder structure:
How to make this bootstrap 'Navbar' straight, I've tried using different navbar classes but couldn't get it straight, please help me out. Snapshot of the web-page given here web-page snapshot
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>>Bootstrap Practice</title>
</head>
<body>
<!-- Navbars -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
Coldplay
</div>
<ul class="nav navbar-nav">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
</div>
</nav>
</body>
</html>
The default behavior of navbar-nav is
flex-direction: column;
Set a class in the html
<ul class="nav navbar-nav navigation-bar-row">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
Then in your css:
.navigation-bar-row {
flex-direction: row;
}
If you're lazy like me, skip everything above and just do:
<ul class="nav navbar-nav" style="flex-direction: row;">
<li> Albums </li>
<li> Awards </li>
<li> Legacy </li>
<li> About </li>
</ul>
Edit: The commenter below me has it right. The best thing to do is add "d-flex flew-row" to the ul class list.
The Bootstrap Navbar docs have a working example that you can copy and paste, substituting in your own values as needed.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 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="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
There are classes set in Bootstrap 4 that will shift the 'horizontal' nav to a vertical nav. Both being straight.
(function(){
var menuToggle = $('#menu-toggle');
menuToggle.click(function(){
menuToggle.next().toggleClass('d-sm-block');
menuToggle.next().toggleClass('d-none');
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm bg-light">
<!-- PUT A BUTTON HERE THAT ON CLICK WILL SHOW HIDE THE NAV -->
<button id="menu-toggle" class="d-block d-md-none">Menu *burger icon*</button>
<ul class="navbar-nav d-none d-md-inline-flex">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>
<div class="container-fluid">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).</p>
</div>
You can put a button in there too, to toggle the nav. Again using Bootstrap classes.
I don't have too long so this is as far as I got.
I have my ASP.NET
page with 100% zoom
And it should look like this
page with 85% zoom
Any idea?
Dots inserted because stackoverflow requires more description
.............................................................................................................................................
MasterPage Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="icon" type="image/png" href="/img/logoMAGA.png" />
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/style-navbar2.css" rel="stylesheet">
<link href="/css/Style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- CHOSEN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
<!-- JQuery MODAL DINAMICO-->
<script type="text/javascript" src="../js/bootstrap-show-modal.js"></script>
<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>
<!-- Jquery DATA TABLE -->
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Jquery DATA TABLE CSS-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- ICONOS FONT AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<script>
$(document).ready(function () {
$('.telefono').keyup(function () {
this.value = (this.value + '').replace(/[^0-9]/g, '');
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
</script>
</head>
<body>
<form runat="server">
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark titulo" style="width:100%; height:100%;">
<div class="container-fluid">
<img class="logo horizontal-logo" height="60px" width="40px" src="/img/logoMAGA.png" alt="forecastr logo">
 
<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 ml-auto mr-5 hola">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Productos</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="/Productos/ProductosMain.aspx">Catálogo</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Inventario
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="/Inventario/Inventario.aspx">Inventario</a>
<a class="dropdown-item" href="/Inventario/Entrada_Maestra.aspx"">Entrada Maestra</a>
<a class="dropdown-item" href="/Inventario/MovimientosInventarioMain.aspx">Movimientos de inventario</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Clasificación
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="/Clasificacion/ClasificacionMain.aspx">Clasificaciones</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Clientes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="/Clientes/ClientesMain.aspx">Catálogo</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ventas
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="/Ventas/Registro_Ventas.aspx">Registrar ventas</a>
<a class="dropdown-item" href="/Ventas/Historial_Ventas.aspx">Historial ventas</a>
<a class="dropdown-item" href="/Ventas/Registro_Ventas.aspx">Registrar Factura de ventas</a>
<a class="dropdown-item" href="/Ventas/Ver_Facturas_Ventas.aspx">Historial-Factura de ventas</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Compras
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="/Compras/Ordenes_Compra.aspx">Registro de compras</a>
<a class="dropdown-item" href="/Compras/Historial_Compras.aspx">Historial Ordenes de compra</a>
<a class="dropdown-item" href="/Compras/Registro_Factura_Compra.aspx">Registro de facturas</a>
<a class="dropdown-item" href="/Compras/Historial_Facturas_Compras.aspx">Historial Facturas de compra</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pedidos
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="/Pedidos/Estatus_Pedido.aspx">Estatus de pedidos</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Proveedores
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="/Proveedores/ProveedoresMain.aspx">Principal</a>
<a class="dropdown-item" href="/Proveedores/Cotizaciones_Proveedores.aspx">Cotización de proveedores</a>
<a class="dropdown-item" href="/Proveedores/Precios_Proveedores.aspx">Actualizar precios de proveedores</a>
<a class="dropdown-item" href="/Proveedores/Comparacion_Proveedores.aspx">Comparar precios</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-cog"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="/Configuraciones/Proveedores_Productos.aspx">Asignación Proveedores-Producto</a>
<a class="dropdown-item" href="/Configuraciones/UnidadMain.aspx">Unidades de medida</a>
<a class="dropdown-item" href="/Configuraciones/SucursalesMain.aspx">Sucursales</a>
<a class="dropdown-item" href="/Posicion/PosicionesMain.aspx">Posiciones</a>
<a class="dropdown-item" href="/Personal/PersonalMain.aspx">Personal</a>
<a class="dropdown-item" href="/Configuraciones/Mi_Cuenta.aspx">Mi cuenta</a>
</div>
</li>
<li class="nav-item dropdown" onclick="ExecCerrarSesion();">
<asp:LinkButton ID="lnkCerrarSesion" runat="server" CssClass="nav-link" OnClick="lnkCerrarSesion_Click">
<span class="fa fa-power-off"></span>
</asp:LinkButton>
</li>
</ul>
</div>
</div>
</nav>
<br />
<br />
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<br />
<br />
<footer class="bg-dark">
<br />
<div class="text-center text-white">
HAZ EL BIEN, HAZLO BIEN
</div>
<br />
</footer>
</form>
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script>
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";
$(window).on("load resize", function () {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function () {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function () {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});
$(".chosen").chosen({ allow_single_deselect: true });
</script>
</html>
I'm using bootstrap 4. And I want to replicate this page's design:
https://www.stickermule.com/custom-stickers
For a more clear idea, I'm using a red bg to ilustrate what I need.
I could change the navbar item background color to red, but there is a gap at the top and at the bottom.
How can I solve this?
CSS Code:
li.nav-item:hover {
background-color: red;
}
Code:
<nav class="navbar navbar-expand-md navbar-dark fixed-top navbar-bg">
<!--<a class="navbar-brand" href="#">Navbar</a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<div class="col-md-8">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Etiquetas</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Magnetos</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Pines</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Empaques</a>
</li>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>-->
</ul>
</div>
<div class="col-md-4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="glyphicon glyphicon-globe"></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">LogIn</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Registro</a>
</li>
</ul>
</div>
<!--<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
-->
</div>
</nav>
UPDATE 1:
Solution by works only when adding nav tag :
nav.navbar {padding: 0 1rem;}
Instead of just:
.navbar {padding: 0 1rem;}
Why?
I'm calling my css file like this:
<link href="{% static 'gallito_app/style.css' %}" rel="stylesheet">
Head content:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'gallito_app/style.css' %}" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" rel="stylesheet">
</head>
This will also alter the height of the navbar
.navbar {padding: 0 1rem;}
if you want to keep the same height add
.navbar .nav-item{padding:1rem 1rem}