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}
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>
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<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="#">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>
</body>
</html>
What I wanted to achieve is that I override the .navbar style without using the !important keyword.
I just learned about #layer and as far as I understand the order of the layers matter. I have two layers:
#layer custom, framework;
#import url(https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css)
layer(framework);
#layer custom {
.navbar {
background-color: red;
}
}
I use the custom layer first and then the framework layer. I expected the custom layer to overrule the framework layer, but the background does not get red. Am I using it wrong or am I missing something here?
Your custom layer CSS is being applied correctly on the navbar here, but it is overridden by the background color set from the bg-light class as bg-light is defined after the navbar class in the HTML, meaning that the CSS for .bg-light will be applied after the CSS for .navbar has been applied (see attached image for reference). Removing the bg-light class will set the background color to red as defined in your custom layer, since it is the last layer defined and in case of multiple styles for the same element being defined in different layers, the last layer containing the style for that element gets the most priority.
For more information on the layer at-rule, you can refer to this :
MDN Web Documents - #layer
CSS-Tricks - Guide to CSS layers
#import url(https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css) layer(framework);
#layer custom {
.navbar {
background-color: red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-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="#">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>
</body>
</html>
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:
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 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;}
}