When I am working with MVC my links does not appear. Code works well in CSS/HTML editor but the dropdown does not work while I test it on MVC layout.
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #333;text-align: center;">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Books
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#Url.Action("New", "MyTemplate")">New books</a>
<a class="dropdown-item" href="#Url.Action("Recommend", "MyTemplate")">Recommended books</a>
<a class="dropdown-item" href="#Url.Action("Available", "MyTemplate")">Available books</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#Url.Action("Genres", "MyTemplate")">Genres</a>
<a class="dropdown-item" href="#Url.Action("Formats", "MyTemplate")">Formats</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("About", "MyTemplate")">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Contact", "MyTemplate")">Contact</a>
</li>
</ul>
</div>
Please note that all links work properly except one's in dropdown(New, Recommend, Available, Genres, Formats).
Head contains scripts and bootstrap/css style files:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" initial-scale="1" shrink-to-fit="no" />
<title>#ViewBag.Title</title>
#RenderSection("head", false)
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css">
<link rel="stylesheet" type="text/css" href="~/Content/style.css">
<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
</head>
#Edit
Solution:
I had to download bootstrap 4.5. I have used 4.5 to style it but MVC had older version and this made problems. Solution is to download all scripts needed by bootstrap 4.5 and attaching CDN of bootstrap 4.5 :)
Related
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>
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:
I can use outline styled buttons on common Navbar nav-item, but when it's a "nav-item dropdown" the button is not showing its borders, see on the image below. Is there any way to make it show borders?
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn-outline-secondary" href="#" id="navbardrop" data-toggle="dropdown" role="button">
Disprofarma
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/PedidoDisprofarma/Index">Pedidos</a>
<a class="dropdown-item" href="/RecepcionDisprofarma/Index">Recepción de Pedidos</a>
</div>
</li>
Not sure, why you are using nav-item here, but if you want to use btn-outline-secondary class, then you need to add btn class too, see here
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn btn-outline-secondary" href="#" id="navbardrop" data-toggle="dropdown" role="button">
Disprofarma
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/PedidoDisprofarma/Index">Pedidos</a>
<a class="dropdown-item" href="/RecepcionDisprofarma/Index">Recepción de Pedidos</a>
</div>
</li>
</body>
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}
I have a navbar and i wanted to open the dropdown menu when i hover on the dropdown title and I accomplished this by using this jquery code:
$('body').on('mouseenter mouseleave', '.dropdown', function (e) {
var dropdown = $(e.target).closest('.dropdown');
var menu = $('.dropdown-menu', dropdown);
dropdown.addClass('show');
menu.addClass('show');
setTimeout(function () {
dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
}, 300);
});
And this CSS:
.dropdown:hover>.dropdown-menu {
display: block;}
The problem is that on small devices,the dropdown will open when i click on the dropdown title,but it will not close when i click again(how bootstrap 4 toggler it's working in a normal case).
How can i do to open the dropdown when i hover on the dropdown title on big screen and open the dropdown when i click on the dropdown title on small screens?
The HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo base_url('assets/css/bootswatch.css'); ?>"/>
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="<?php echo base_url('assets/css/overwrite.css');?>" type="text/css"/>
<link rel="stylesheet" href="<?php echo base_url('assets/css/style.css');?>" type="text/css"/>
<script src="<?php echo base_url('assets/jquery/jquery.js');?>"></script>
</head>
<body>
<div class="top-text-container">
<div class="top-text">
<div class="top-text-left">Pentru Comenzi:
<i class="fas fa-phone fa-lg"></i>
<span id="top-number-phone">0746117702</span>
</div>
<div class="top-text-right">Login</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed">
<a class="navbar-brand" href="#"><img class="logo-img" src="<?php echo base_url('assets/images/test2_logo.png');?>"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Acasa</a>
<span class="divider">|</span>
</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">Meniu</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Pizza</a>
<a class="dropdown-item" href="#">Carne de pui</a>
<a class="dropdown-item" href="#">Carne de porc</a>
<a class="dropdown-item" href="#">Garnituri</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Salate</a>
</div>
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Meniul Zilei Weekend</a>
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Evenimente</a> <!--dropdown-->
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galerie</a>
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item cart">
<a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-lg"></i></a>
<div id="cart-count">3</div>
</li>
</ul>
</div>
</nav>
What you can is have your CSS only show the hover dropdown for a screen width above x pixels. Then the click functionality will work as normal when its collapsed. If you want to show above 768 for example:
#media only screen and (min-width: 768px) {
.dropdown:hover>.dropdown-menu {display: block;}
}