I'm new in programming,and I decided to start designing a website. While coding, I found an issue: I can't make the dropdown menu look OK. I'll leave a picture of how it looks and the code I wrote, so you can help me!
Thank you in advance!
HTML
img{max-width:100%;}
.quitar-float{float: none;}
.espacio-arriba{margin-top: 100px;}
#principal{
width:40%;
float:none;
margin-top:100px;
text-align: center;
margin: 0 auto;
}
#otro_elemento{margin-top:100px;}
.ingreso:hover{color:white;}
.img-responsive{margin: 0 auto;}
.ingreso{
font-size:240%;
color:black;
}
.menu{color:#B40000;}
body{
font-family: 'Days One', sans-serif;
color:#B40000;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
border-color: white;
background-image: url(https://http2.mlstatic.com/cesped-bermuda-gramilla-brasilera-envios-a-mvdeo-D_NQ_NP_20364-MLU20188773672_102014-F.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.links{font-size: 20em;}
.espacio-derecha{margin-right: 1em;}
.se-gris{background-color: #eee;}
.padding-largo{padding:5px 10px;}
.inline-block{
float:none;
display: inline-block;
margin-right: -6px;
}
.no-lista{
margin:0;
padding:0;
}
.no-lista li{list-style-type:none;}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Club Atlético Rivadavia</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="container-fluid">
<ul class="nav navbar-nav no-lista se-gris inline-block padding-largo">
<li class="dropdown col-md-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#">El Club<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Historia</li>
<li>Disciplina</li>
<li>Comisión directiva</li>
</ul>
</li>
<li class="col-md-2">Fútbol</li>
<li class="col-md-2">Estadio</li>
<li class="col-md-2">Sede</li>
<li class="col-md-2">Fútbol infantil</li>
<li class="dropdown col-md-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Polideportivo<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Básquet</li>
<li>Hockey</li>
<li>Natación</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Try replacing nav with the following:
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">El Club<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Historia</li>
<li>Disciplina</li>
<li>Comisión directiva</li>
</ul>
</li>
<li>Fútbol</li>
<li>Estadio</li>
<li>Sede</li>
<li>Fútbol infantil</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Polideportivo<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Básquet</li>
<li>Hockey</li>
<li>Natación</li>
</ul>
</li>
</ul>
</div>
</nav>
There are a lot of assumptions in my attempt to solve your problem. But, you for sure need to read more about Bootstrap and what col-md-* mean.
Have a look:
body{
font-family: 'Days One', sans-serif;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
background: url(https://http2.mlstatic.com/cesped-bermuda-gramilla-brasilera-envios-a-mvdeo-D_NQ_NP_20364-MLU20188773672_102014-F.jpg) center center no-repeat fixed /cover;
}
nav{
background-color: #eee;
text-align: center;
margin:10px;
padding:5px 10px;
}
.inline-block{
float:none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet">
<body>
<nav class="navbar">
<ul class="nav navbar-nav inline-block">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">El Club<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Historia</li>
<li>Disciplina</li>
<li>Comisión directiva</li>
</ul>
</li>
<li>Fútbol</li>
<li>Estadio</li>
<li>Sede</li>
<li>Fútbol infantil</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Polideportivo<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Básquet</li>
<li>Hockey</li>
<li>Natación</li>
</ul>
</li>
</ul>
</nav>
</body>
Related
I would like to ask how to move nav-link to the right? becuase I try it like float: right or margin left:auto,it will lead hamburger menu to the middle. I want the hamburger menu and navlink all to right side. Besides, when I minimize my screen smaller, the hamburger menu and navlink are fine they are in right side, just when I minimize my screen bigger, the nav-link is at the left side. Also, when I minimize the screen smaller, I click the dropdown menu, the navbar become bigger and the dropdown menu is inside the navbar which lead the navbar bigger. I want the dropdownmenu outside the navbar. I try to use position: fixed, position :relative and position absolute, it doesn't fix it. Therefore, I would like to ask is there any solutions about. So, I can fix it. Thank you.
This my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!--Icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<title>Admin Dashboard</title>
<style>
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #021B4D;
}
.sidebar .nav-link:hover {
color: #FFDB1A !important;
}
/*Navbar*/
.navbar{
background-color:#021B4D !important;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
margin-left:20px;
}
.white-text{
color:#fff;
}
.dropdown-menu a:hover{
background-color:#021B4D;
color:#fff;
}
</style>
</head>
<body>
<nav class=" navbar navbar-expand-lg sticky-top ">
<a class="navbar-brand" href="">
<img src="eGrocery_SDP(Logo).jpeg" width="50" height="40">
</a>
<button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-
target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin-
left:auto;"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<ul class="navbar-nav " >
<li class="nav-item dropdown " >
<a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i
class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Account
<div class="dropdown-divider"></div>
Logout
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Manage Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Manage Staff
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Sales Reports
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
To fix the user icon always to the right, I added this css:
a.nav-link.dropdown-toggle{
text-align: right;
}
Then on large screen to keep your ul always to the right I add BS4 class ml-lg-auto that will add margin au to the left for screen over lg break points.
For having hambuger align right add class ml-left to your button.
If you want to have the same effect of your dropdown in small and large screen I added css as follow:
#media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
a.nav-link.dropdown-toggle{
text-align: right;
}
#media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!--Icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<title>Admin Dashboard</title>
<style>
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #021B4D;
}
.sidebar .nav-link:hover {
color: #FFDB1A !important;
}
/*Navbar*/
.navbar{
background-color:#021B4D !important;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
margin-left:20px;
}
.white-text{
color:#fff;
}
.dropdown-menu a:hover{
background-color:#021B4D;
color:#fff;
}
</style>
</head>
<body>
<nav class=" navbar navbar-expand-lg sticky-top ">
<a class="navbar-brand" href="">
<img src="eGrocery_SDP(Logo).jpeg" width="50" height="40">
</a>
<button class=" navbar-toggler navbar-toggler-right ml-auto" type="button" data-toggle="collapse" data-
target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin-
left:auto;"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<ul class="navbar-nav ml-lg-auto" >
<li class="nav-item dropdown " >
<a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i
class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a>
<div class="dropdown-menu user-dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Account
<div class="dropdown-divider"></div>
Logout
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Manage Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Manage Staff
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Sales Reports
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I have a nivagation bar with button links in row on resize the window to smaller width each button wrap underneath which changing the navigation height, gets removed from the nav and appended into a dropdown menu.
I managed to append wrapped buttons when the navigation height is higher than 80, but it will only work if the initial size of the screen is big which will have all buttons in one row. but if the screen started at a smaller width it won't append all wrapped buttons in the menu.
Here is my attempt
$(window).resize(function() {
var navbar = $("#navbar");
var list = $("#list");
var btns = $("#btns");
var last_element;
for (var i = 0; i < list.children().length; i++) {
setTimeout(function() {
if (list.height() > 80) {
last_element = list.children().last();
setTimeout(function() {
$("#btns .dropdown-menu").prepend(last_element);
}, 300);
last_element.remove();
}
}, 500);
}
});
#navbar {
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
}
#list {
margin: 0;
padding: 0;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.item {
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
/* display: inline-block; */
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
}
.dropdown-menu {
width: 200px;
padding: 0 20px;
}
<!-- bootstrap style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar">
<ul id="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
<li class="item">item 4</li>
<li class="item">item 5</li>
<li class="item">item 6</li>
<li class="item">item 7</li>
</ul>
<div id="btns">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
</div>
</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I would love to have similar action to this image,
Can someone offer a snippet suggestion or what should I use to implement such action?
Updated - move hidden items to dropdown menu
First, make changes on css:
apply display: flex to #navbar.
calculate the maximum height of #list manually and set max-height & overflow: hidden property to it. In this case, the maximum height of #list would be 73px but not 80px. (the height of .item 65px + top margin of .item 4px + bottom margin of .item 4px = 73px) If the max-height is not correct, #list may not hide the .items properly.
set display: inline-block for .items.
`
#navbar{
width: fit-content;
background-color: #dbdbdb;
box-shadow: 2px 2px 2px #999;
border-radius: 10px;
padding: 10px;
/*Flex layout*/
display:flex;
flex-direction:row;
align-items:center;
}
#list{
margin: 0;
padding: 0;
/*Calculate the max-height and set overflow hidden*/
overflow:hidden;
max-height:73px;
}
.item{
color: #333;
font-size: 30px;
font-weight: bold;
background-color: #f5f5f5;
display: inline-block;
padding: 10px 30px;
border-radius: 5px;
box-shadow: 2px 2px 2px #888;
margin: 4px 2px;
list-style-type: none;
/*Move text-align center to here*/
text-align: center;
/*Remove flex layout & add display inline-block*/
display: inline-block;
}
.dropdown-menu{
width: 200px;
padding: 0 20px;
}
`
Then, update the $(window).resize() function.
The below code will check if the item is being moved to a hidden area. Moreover, use .html() to refresh the dropdown menu.
let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");
$(window).resize(function() {
let listPosition = list.position().top;
let hiddenItems = listItems.filter(function(){
return $(this).position().top - listPosition > 0;
}).clone();
dropdownMenu.html(hiddenItems);
});
I see you're using bootstrap. You still can do this without any JS if a collapsible menu on mobile devices is what you need.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
I want to change the background of nav item on dropdown when they are clicked. and also in screen resolution less than 992px the nav menu appears after clicking toggle button but thats not the problem, the problem is that the submenus in dropdown are in such a way that it is difficult to understand whoose submenu is displaying. I want to fix this.
this following is my html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<!-- bootstrap link -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">
<!-- JQuery3.2.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Trekking In Nepal -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Trekking in Nepal
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Annapurna Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Annapurna Circuit</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Annapurna Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Upper Mustang</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Everest Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Jiri to Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Everest Three Pass</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Langtang Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Helambu</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Langtang Gosaikunda Lake</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Valley</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
This following is what i write in custom.css
.navbar-collapse .navbar-nav .dropdown .dropdown-menu{
margin-left: 0px !important;
margin-top: 0px !important;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
.dropdown:hover>.dropdown-menu{
display: block;
}
.dropdown-submenu:hover>.dropdown-menu{
display: block;
}
#media only screen and (max-width: 991px) {
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
}
.submenuNav{
opacity: 0.8;
margin-right: 3px;
}
.submenuNav:hover{
opacity: 1;
transform: translateX(3px);
transition: 0.4s all ease;
margin-right: 0px;
}
.dropdown-item{
background-color: none !important;
color: #007bff;
opacity: 0.8;
}
.dropdown-item:hover{
background-color: none !important;
color: #007bff;
opacity: 1;
transition: 0.2s all ease;
}
.customNav{
background-color: none !important;
color:#007bff !important;
}
.navbar .navbar-toggler .navbar-toggler-icon{
background-color: #007bff;
}
This following is js file I write in custom.js
$(document).ready(function(){
$(".dropdown-item").click(function(){
$(this).addClass("customNav");
});
});
You are saying:
I want to change the background of nav item on dropdown when they are clicked
In this case, you need to change/set the active css selector for the a tags like so:
.dropdown-submenu a:active {
background-color: yellow;
}
More info:
https://www.w3schools.com/cssref/sel_active.asp
My navigation bar working perfectly but when i zoom it so it is disappear.
i want when certain zoom will be done so all the nav link should bind into one icon. how can i achieve it, please help
My html
<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>
<link rel="stylesheet" type="text/css" href="/css/header.css">
</head>
<header>
<body>
<nav>
<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>
<div class="box_two">
<ul>
<li>Home</li>
<li>About Us </li>
<li>City </li>
<li>How it works </li>
<li> Contact </li>
</ul>
</div>
<!-- <div class="box_three">
<ul>
<li><img src="img/login.png" width="30px" alt="login" title="login" align="left"> Login</li>
<li><img src="img/signup.png" width="30px" alt="signup" title="signup" align="left"> Sign Up</li>
</ul>
</div>
-->
</nav>
</header>
My CSS
body{margin:0px;}
nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
.box_one{width: 180px;float: left;height: 80px;margin-left: 30px;}
.box_two{font-size: 18px;width: 70%;float: left;height: 80px;margin-left: 8%;}
.box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}
nav a{text-decoration:none;color: white;}
nav li
{
margin-top: 26px;
display:block;
float:left;
min-height:150px;
max-height:200px;
padding: 5px;
list-style: square outside none;
padding-left: 1em;
text-indent: -.7em;
}
.box_two li
{
min-width:60px;
max-width:120px;
}
.box_three li
{
width:93px;
}
nav ul {
list-style: none;
padding:0;
margin:0;
}
For example i have uploaded code on jsfiddle please check
When you will zoom out so it is showing on jsfiddle
You should you bootstrap for this, It will make your life easy. If you don't want to use bootstrap you have to use CSS media queries for all resolution which is not cool. I have created an example of menu bar using bootstrap for you here it is. for more info refer getBootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
----- UPDATE -----
You have to modify media queries as per you requirement currently I have adjusted menu so it will be visible even if you zoom it.
<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>
<link rel="stylesheet" type="text/css" href="/css/header.css">
<style type="text/css">
body{margin:0px;}
nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
.box_one{width: 180px; float: left; height: 80px;margin-left: 30px;}
.box_two{font-size: 18px; float: left;height: 80px;}
.box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}
nav a{text-decoration:none;color: white;}
nav li
{
margin-top: 26px;
display:block;
float:left;
padding: 5px;
padding-left: 1em;
}
.box_three li
{
width:93px;
}
nav ul {
list-style: none;
padding:0;
margin:0;
}
#media (max-width: 991px) {
header{ width:100% !important;}
}
#media (max-width: 767px) {
header{ width:100% !important;}
.box_one{width: 100px; margin-left: 5px;}
#media (max-width: 480px) {
.button05 {margin: 10px 0 0;width: 100%;}
.box_one{width: 100px; margin-left: 0px;}
.box_two {
font-size: 12px;
float: none;
height: auto;
}
}
#media (max-width: 375px) {
header{ width:100% !important;}
.box_one{width: 100px; margin-left: 0px;}
.box_two {
font-size: 12px;
float: none;
height: auto;
}
nav li {
padding: 5px;
padding-left: 5px;
font-size: 10px;
}
}
</style>
</head>
<body>
<header>
<nav>
<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>
<div class="box_two">
<ul>
<li>Home</li>
<li>About Us</li>
<li>City</li>
<li>How it works</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
CSS3 transition works fine in an HTML page, but not in a .aspx page. Is there a way to overcome this? I'd like to do the app in Web Forms as it makes designing the forms much easier. Any input would be appreciated.
Here is the .aspx page:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CMSWebForms.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="Content/jquery-1.10.2.min.js" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-combined.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Content/test.css"/>
</head>
<body>
<ul id="sidebar" class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: fixed; top: 0; left: 0;">
<li><h1 class="text-center"><a tabindex="-1" href="#">CMS</a></h1></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Sales</a>
<ul class="dropdown-menu text-right">
<li><a tabindex="-1" href="#">Customers</a></li>
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Pricing</a>
<ul class="dropdown-menu text-center">
<li><a tabindex="-1" href="#">A</a></li>
<li><a tabindex="-1" href="#">B</a></li>
<li><a tabindex="-1" href="#">C</a></li>
<li><a tabindex="-1" href="#">D</a></li>
<li><a tabindex="-1" href="#">E</a></li>
</ul>
</li>
<li><a tabindex="-1" href="#">Quotes</a></li>
<li><a tabindex="-1" href="#">Orders</a></li>
<li><a tabindex="-1" href="#">Pricing</a></li>
<li><a tabindex="-1" href="#">Reports</a></li>
</ul>
</li>
<p> </p>
<!--<p> </p>-->
<li class="dropdown-submenu pull-right">
<a tabindex="-1" href="#" id="myId">Manufacturing</a>
<ul class="dropdown-menu text-center">
<li><a tabindex="-1" href="#">One</a></li>
<li><a tabindex="-1" href="#">Two</a></li>
<li><a tabindex="-1" href="#">Three</a></li>
<li><a tabindex="-1" href="#">Four</a></li>
<li><a tabindex="-1" href="#">Five</a></li>
</ul>
</li>
</ul>
<!--</div>-->
<!--<div id="wrapper">-->
<div id="page-content-wrapper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li>
<button id="sidebarToggle" class="btn btn-primary btn-lg">
<i class="fa fa-angle-left"></i>
</button>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="btn btn-sm btn-info">
<i class="fa fa-sign-in"></i> Log in
</a>
</li>
</ul>
</div>
</nav>
<div class="content-header container-fluid text-center">
<h1 id="home" class="">
CMS
</h1>
</div>
<div class="page-content inset container-fluid">
<div class="row">
<div class="jumbotron text-center">
<h1 class="">Hello Beautiful!</h1>
<p class="">
</p>
Name:
<asp:TextBox ID="TextBox1" runat="server" Width="248px"></asp:TextBox>
Address:
<asp:TextBox ID="TextBox2" runat="server" Width="248px"></asp:TextBox>
</div>
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<h4 class="text-center text-primary">©2016 Apiron Technologies, Inc.</h4>
</div>
</div>
</div>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script src="Scripts/site.js"></script>
</body>
</html>
</asp:Content>
Here is the CSS:
#sidebar{
background: #000;
color: #999999;
border-radius: 0;
padding: 0;
height: 100%;
width: 200px;
margin-top: 0;
transition: .25s;
}
#sidebar.dropdown-menu.text-right.hide-sidebar{
left: -200px !important;
transition: .25s;
}
.navbar.navbar-inverse{
border-radius: 0 !important;
background: #1536b6 !important;
}
.navbar-inverse
.navbar-inverse .nav>li>a {
color: #fff !important;
}
.btn-info{
color: #fff !important;
}
.navbar.navbar-inverse.navbar-fixed-bottom{
margin-left: 200px !important;
}
#page-content-wrapper {
margin-left: 200px;
transition: .25s;
}
#page-content-wrapper.hide-sidebar{
margin-left: 0;
transition: .25s;
}
.dropdown-menu {
border-radius: 0;
padding: 0;
}
.dropdown-menu li a {
background: #000;
color: #999999;
display: block;
text-decoration: none;
outline: none;
}
.dropdown-menu li a:hover,
.dropdown-menu li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.dropdown-menu.text-right li a {
background: #000;
color: #999999;
display: block;
text-decoration: none;
outline: none;
}
.dropdown-menu.text-right li a:hover,
.dropdown-menu.text-right li.active {
color: #fff;
background-color: #333131 ;
text-decoration: none;
}
.dropdown-submenu.pull-right{
background: #000;
display: block;
width: 100%;
}
#myId {
color: aqua;
}
and here is the JS:
(function () {
var $sidebarAndWrapper = $("#sidebar,#page-content-wrapper");
var $icon = $("#sidebarToggle i.fa");
$("#sidebarToggle").on("click", function () {
$sidebarAndWrapper.toggleClass("hide-sidebar");
if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
$icon.removeClass("fa-angle-left");
$icon.addClass("fa-angle-right");
}
else {
$icon.removeClass("fa-angle-right");
$icon.addClass("fa-angle-left");
}
});
})();
What browser are you checking in? Try using another browser.
Once i had a same problem. Resetting IIS site fixed the issue. You can also try prefixing CSS.
Cheers