I have a BS4 dropdown element and I am animating the little caret on the right side of the toggle. This works wonderful so far, but only as long as the mouse is hovering the dropdown item. When I hover over the submenu items the caret rotates back. This should not happen until the mouse leaves dropdown AND dropdown-menu.
html {
font-family: Arial;
font-size: 1.4rem;
line-height: 1.4rem;
}
.dropdown {
display: inline-block;
padding: 0 7px;
}
.dropdown.show {
background-color: rgba(255, 255, 255, 0.9);
}
.dropdown a::before {
content: "";
}
.dropdown a.dropdown-toggle {
cursor: pointer;
padding: 3px 7px;
}
.dropdown a.dropdown-toggle::after {
font-size: 1.4rem;
content: ">";
color: Orange;
line-height: 1.4rem;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
vertical-align: middle;
transition: 0.5s;
}
.dropdown a.dropdown-toggle:hover::after {
transform: rotate(90deg);
}
.dropdown .dropdown-menu {
min-width: initial;
padding: 0.5rem;
margin: 0;
margin-left: 7px;
font-size: initial;
border-radius: 0;
transition: all 0.5s;
overflow: hidden;
transform-origin: top center;
transform: scale(1,0);
display: block;
border: none;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
a.dropdown-item {
font-size: 1.6rem;
line-height: 2.9rem;
text-decoration: none;
}
a.dropdown-item:hover {
color: Orange;
}
.dropdown:hover .dropdown-toggle {
background-color: rgba(255, 255, 255, 0.9);
}
.dropdown:hover .dropdown-menu {
transform: scale(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
MAIN
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sub1</a><br/>
<a class="dropdown-item" href="#">Sub2</a><br/>
<a class="dropdown-item" href="#">Sub3</a>
</div>
</div>
As the animated rotate in this included snippet does not work for unknown reason I have prepared a Codepen as well. Here you can see the rotation:
https://codepen.io/SchweizerSchoggi/pen/GRoZYqV
My wish is to keep the rotated caret as long as the mouse position is over dropdown or the dropdown-menu.
Since with css you can't go back to "previous siblings" (let alone parent) elements, you can position the dropdown-toggle element after the menu like this:
<div class="dropdown">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sub1</a>
<a class="dropdown-item" href="#">Sub2</a>
<a class="dropdown-item" href="#">Sub3</a>
</div>
<a class="dropdown-toggle" data-toggle="dropdown">MAIN</a>
</div>
so that on hover of the menu the dropdown-toggle element can be reached like this:
.dropdown-menu:hover + a:after{
transform: rotate(90deg);
}
Here is the working fiddle.
Related
I have made this concept: https://codepen.io/andrelange91/pen/yLpJRRw?editors=1100
In it, I have a bell icon which when pressed shows a dropdown with notifications.
But, depending on the screensize its never really placed with the arrow on the dropdown pointing at the middle of the bell icon..
How can i accomplish this?
I'm a bit rusty when it comes to frontend programming, and I haven't been able to find any suitable solutions when researching it.
HTML
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item notification-wrapper">
<button class="notification-button">
<i class="fas fa-bell"></i>
<span>6</span>
</button>
<div class="notification-popup">
<div class="notification-popup__header">
<h3>Notifikationer</h3>
<button title="marker alle som læst"><i class="fa-solid fa-check"></i></button>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<nav>
</nav>
Styling
$clr-white-1: #ecf0f1;
$clr-white-2: darken($clr-white-1, 5%);
$clr-t300: #444;
$clr-t500: #95a5a6;
$clr-p300: #111;
$clr-a300: #e74c3c; //#FF6A6A; //salmon
$container-shadow: 0.5rem 0.5rem 2rem 0 rgba(black, 0.2);
$h-gutter: 2rem;
$v-gutter: 0.75rem;
body {
padding: 5% 0;
margin: 0 0 50px 0;
box-sizing: border-box;
width: 100vw;
height: 100vh;
background: $clr-white-1;
background: linear-gradient(30deg, $clr-white-2, $clr-white-1);
font-family: "Lato", Arial, sans-serif;
font-weight: 500;
letter-spacing: 0.05rem;
nav {
position: absolute;
left: 500px;
}
}
.notification-wrapper {
position: relative;
}
button.notification-button {
position: relative;
margin-right: 1em;
border-radius: 5px;
background: none;
border: none;
i {
margin: 0.5rem;
}
&:nth-of-type(1) {
i {
background: -webkit-linear-gradient(300deg, #acccea, #6495ed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:nth-of-type(2) i {
background: -webkit-linear-gradient(300deg, #fff9ab, #00b8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
svg,
.fa-bell {
color: white;
font-size: 28px;
}
span {
position: absolute;
user-select: none;
cursor: default;
font-size: 0.6rem;
background: $clr-a300;
width: 1.2rem;
height: 1.2rem;
color: $clr-white-1;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
top: -0.33rem;
right: 0;
box-sizing: border-box;
animation-name: scaleCount;
animation-iteration-count: 1;
animation-timing-function: all;
animation-duration: 1s;
animation-delay: 0s;
#keyframes scaleCount {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
60% {
transform: scale(0.5);
}
80% {
transform: scale(1.25);
}
}
}
}
.notification-popup {
display: none;
&.active {
display: block;
}
&:before {
// triangle
content: "";
position: absolute;
top: 1px;
right: 0;
width: 0;
height: 0;
transform: translate(-1rem, -100%);
border-left: 0.75rem solid transparent;
border-right: 0.75rem solid transparent;
border-bottom: 0.75rem solid white;
}
cursor: default;
position: absolute;
z-index: 999;
top: 56px;
left: -210px;
width: 400px;
font-weight: 300;
background: white;
border-radius: 0.5rem;
box-sizing: border-box;
box-shadow: $container-shadow;
animation-name: dropPanel;
animation-iteration-count: 1;
animation-timing-function: all;
animation-duration: 0.75s;
&__header {
h3 {
text-transform: uppercase;
font-size: 75%;
font-weight: 700;
color: #84929f;
padding: $v-gutter * 2 $h-gutter;
display: inline-block;
}
button {
float: right;
border: none;
background: none;
i {
text-transform: uppercase;
font-size: 22px;
font-weight: 700;
padding: $v-gutter * 2 $h-gutter;
color: #84929f;
}
}
}
.notification-item {
border-bottom: 2px solid lightgrey;
display: block;
overflow: hidden;
width: 100%;
padding: 10px 0;
ul {
li {
float: left;
list-style: none;
padding: 5px;
position: relative;
&:first-child {
i {
font-size: 22px;
}
}
&:last-child {
right: $h-gutter;
margin-left: $v-gutter;
float: right;
}
button {
&:hover {
opacity: 0.8;
cursor: pointer;
}
span {
color: #b5c4d2;
font-size: 140%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
}
background: none;
border: none;
}
}
}
}
}
#keyframes dropPanel {
0% {
opacity: 0;
transform: translateY(-100px) scaleY(0.5);
}
}
And for completeness sake my js
$(".notification-button").on("click", function () {
const ele = $(".notification-popup");
if (ele.hasClass("active")) {
console.log("remove active");
ele.removeClass("active");
} else {
console.log("add active");
ele.addClass("active");
}
});
document.addEventListener(
"click",
function (event) {
// If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal()
if (
event.target.closest(".notification-button") == null &&
event.target.closest(".notification-popup") == null
) {
console.log("remove active click outside");
$(".notification-popup").removeClass("active");
}
},
false
);
Don't position the popup with a negative left value, but use right: 50%; instead. That gets you the right corner aligned to the middle of the li that contains the button.
And then add transform: translateX(20px); to compensate for about half of the button width. Or use translateX(1.25em) if you want to keep it dynamic regarding font size.
Try using .notification-popup{ transform: center top; }
How to make child element inherit parent's width using Bootstrap 4.
I need to fix download_resume block's width.
I'm using two primary js script's.
1.First function change img like hover effect
2.Second function adding sticky class to our empty_row block make it position fixed
Please look this code in wide screen devices or in codepen for understand the problem and what I want to realize
// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
avatarQuantumBreak.style.opacity = "0";
let hover = () => {
avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
let w = document.documentElement.clientWidth;
if (w > 940) {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
}
}
.other_block {
background-color:lightblue;
}
.main_wrap {
margin-top:15px;
background-color:pink;
height:600px;
}
.home_link , .main_text {
color: #fff;
font-size: 1.5em;
}
.left_block {
/*height: 60%;*/
padding: 30px 20px 20px;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.avatar {
position: relative;
border-radius: 50%;
display: flex;
justify-content: center;
height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
position: absolute;
display: block;
text-align:center;
transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
border-radius: 50%;
display: inline-block;
}
.info {
margin-top: 33px;
}
.text_uppercase {
text-transform: uppercase;
color: #fff;
font-size: 1.4em;
text-align: center;
margin-bottom: 15px;
}
.text_muted {
text-align: center;
opacity: 0.65;
}
.social_links {
display: flex;
justify-content: center;
}
.social_links li {
list-style-type: none;
margin: 5px 12px;
vertical-align: middle;
}
.social_links li a {
color: #fff;
cursor: pointer;
transition: all .2s ease-out;
background-color: transparent;
}
.social_links li a i {
font-size: 1.25em;
transition: all .2s ease-out;
}
.social_links li a i:hover {
opacity: 0.65;
}
.download_resume {
position:absolute;
width: 100%;
left: 0%;
padding: 30px;
margin: 0;
font-size: .875em;
background-color: #313C42;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.text_widget {
vertical-align: middle;
}
.text_widget a {
background-color: #DEC746 !important;
border-color: #DEC746 !important;
color: #000 !important;
font-size: 15px !important;
padding: 12px 30px !important;
border-radius: 35px !important;
}
center {
display: block;
text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
font-weight: 700 !important;
}
.sticky {
position: fixed !important;
top: 2%;
width: 285px;
}
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
<div class="avatar" onmouseover="hover();" onmouseout="normal();">
<span class="avatar_simple">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
</span>
<span class="avatar_quantum_break">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
</span>
</div>
<div class="info">
<h2 class="text_uppercase">Sergio Ramos</h2>
<p class="text_muted">Front End Developer</p>
<ul class="social_links">
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<div class="download_resume">
<div class="text_widget">
<center>
Download CV
</center>
</div>
</div>
</div></div>
<div class="col-lg-8 col-xl-8 other_block">
<div class="main_wrap">text</div>
</div>
</div>
</div>
Setting the width to inherit isn't the best solution. When you don't have "sticky" on it does things you don't expect.
I've added an extra div to wrap your top section in question. You're really only concerned about the padding staying for that top section with your picture when you move from sticky to non-sticky. This separates it from the resume download button. Then you don't need to specify any width on that div, as it will work like it is supposed to.
HTML (I've added the "left-block-padding" div)
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-3 col-xl-3 any_block"><div class="empty_row left_block" style="background-color: #1FA184;">
<div class="left-block-padding">
<div class="avatar" onmouseover="hover();" onmouseout="normal();">
<span class="avatar_simple">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-1-195x195.png">
</span>
<span class="avatar_quantum_break">
<img src="https://certy.px-lab.com/developer/wp-content/uploads/sites/6/2017/08/certy-programmer-2-195x195.png">
</span>
</div>
<div class="info">
<h2 class="text_uppercase">Sergio Ramos</h2>
<p class="text_muted">Front End Developer</p>
<ul class="social_links">
<li>
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="download_resume">
<div class="text_widget">
<center>
Download CV
</center>
</div>
</div>
</div></div>
<div class="col-lg-8 col-xl-8 other_block">
<div class="main_wrap">text</div>
</div>
</div>
</div>
CSS (added .left-block-padding and removed position:absolute; and width: 100%; from .download_resume
.other_block {
background-color:lightblue;
}
.main_wrap {
margin-top:15px;
background-color:pink;
height:600px;
}
.home_link , .main_text {
color: #fff;
font-size: 1.5em;
}
.left_block {
/*height: 60%;*/
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.avatar {
position: relative;
border-radius: 50%;
display: flex;
justify-content: center;
height: 195px;
}
.avatar_simple,
.avatar_quantum_break {
position: absolute;
display: block;
text-align:center;
transition: opacity 1s ease-out;
}
.avatar .avatar_simple img,
.avatar .avatar_quantum_break img {
border-radius: 50%;
display: inline-block;
}
.info {
margin-top: 33px;
}
.text_uppercase {
text-transform: uppercase;
color: #fff;
font-size: 1.4em;
text-align: center;
margin-bottom: 15px;
}
.text_muted {
text-align: center;
opacity: 0.65;
}
.social_links {
display: flex;
justify-content: center;
}
.social_links li {
list-style-type: none;
margin: 5px 12px;
vertical-align: middle;
}
.social_links li a {
color: #fff;
cursor: pointer;
transition: all .2s ease-out;
background-color: transparent;
}
.social_links li a i {
font-size: 1.25em;
transition: all .2s ease-out;
}
.social_links li a i:hover {
opacity: 0.65;
}
.download_resume {
left: 0%;
padding: 30px;
margin: 0;
font-size: .875em;
background-color: #313C42;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
.text_widget {
vertical-align: middle;
}
.text_widget a {
background-color: #DEC746 !important;
border-color: #DEC746 !important;
color: #000 !important;
font-size: 15px !important;
padding: 12px 30px !important;
border-radius: 35px !important;
}
center {
display: block;
text-align: -webkit-center;
}
.btn_link:hover, .share-btn:hover {
box-shadow: -1px 2px 4px rgba(0,0,0,.25);
}
.btn_link {
font-weight: 700 !important;
}
.sticky {
position: fixed !important;
top: 2%;
width: 285px;
}
.left-block-padding {
padding: 30px 20px 20px;
}
JS (unchanged)
// this function change img like hover effect using js
let avatarSimple = document.querySelector(".avatar_simple");
let avatarQuantumBreak = document.querySelector(".avatar_quantum_break");
avatarQuantumBreak.style.opacity = "0";
let hover = () => {
avatarQuantumBreak.style.opacity = "1";
}
let normal = () => {
avatarQuantumBreak.style.opacity = "0";
}
// this function adding sticky class to our empty_row block make it position fixed
window.onscroll = function() {
let w = document.documentElement.clientWidth;
if (w > 940) {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
scrolled >= 20 ? document.querySelector(".empty_row").classList.add("sticky") : document.querySelector(".empty_row").classList.remove("sticky");
}
}
https://codepen.io/adprocas/pen/QmLjJM
Use width:inherit to inherit parent element's width
.download_resume {
position:absolute;
width: inherit;
left: 0%;
padding: 30px;
margin: 0;
font-size: .875em;
background-color: #313C42;
box-shadow: -4px 7px 15px 1px rgba(0,0,0,.2);
}
Code sample - https://codepen.io/nagasai/pen/xWKGvW
Im added tab for the image icon , im try to do that when i click the button (active button) after image icon change to be book_hover.png font color is change but image icon not change ,how to replace the image after NavTab active moment
.footer-tab .tooter-nav-tab {
padding: 2rem;
height: 10vh;
width: 100%;
margin-left: 0rem;
background: white;
border-top: 1px solid #c9cfd9;
display: inline;
text-align: center;
}
p.tab-txt {
font-size: 0.7rem;
}
.footer-tab ul {
list-style-type: none;
margin: 0;
padding: 0;
border-top: 1px solid #c9cfd9;
overflow: hidden;
background-color: #ffffff;
}
.footer-tab li {
float: left;
}
.footer-tab .nav-tabs .nav-link.active {
color: white;
background-color: #8bb6f3;
border-color: #ddd #ddd #fff;
}
.footer-tab li a {
display: block;
color: #3f5370;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
.footer-tab li a:hover {
background-color: #8bb6f3;
color: white;
}
.footer-tab-img :active {
background:url'https://image.ibb.co/ffSy9F/book_hover.png')no-repeat;
color: white;
}
/*footernavtab*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="img-01 w-25"><a href="" class="nav-link"}}
<span class="footer-tab-img active">
<img src="https://image.ibb.co/mOHJbv/book.png" alt="book" border="0">
</span>
<p class="tab-txt">Book</p>
</a>
</li>
</ul>
</div>
Finally i fixed my issue, im used this class footer-tab-img-01 and added separate color image and code crete like this
`span.footer-tab-img-01 { background: url('/Image/users.png') no-repeat; width: 32px; height: 32px; display: block; margin-left:1.2rem; }
.nav-link.active span.footer-tab-img-01 { background: url('/Image/users-hover.png') no-repeat; width: 32px; height: 32px; display: block; margin-left:1.2rem; }`
<div class="footer-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="img-01 w-25"><a href="" class="nav-link"}}
<span class="footer-tab-img-01">
</span>
<p class="tab-txt">Book</p>
</a>
</li>
</ul>
</div>
//#384a5a clear color
//#2f3f4d dark color
when I hover and click the arrow right: content: "\e080"; get light color : #384a5a,
the background should be the same as the li background: #2f3f4d.
everything it is wroking perfect just this background colour when I hover the li with arrow right: content: "\e080"; get different background.
So what I try to archive is: make the bg colour the same as the li when I hover the arrow right.
jsfiddle: http://jsfiddle.net/Wc4xt/4393/
html:
<div class="sidebar ">
<div class="sidebar-wrapper">
<ul class="sidebar-nav">
<li>test
</li>
<li>
test
</li>
<li>
<i class="pull-left fa-lg fa fa-barcode" aria-hidden="true"></i>
test
</li>
<li>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1" class="">tes
</a>
</div>
<div class="collapse-styled collapse in" id="collapseExample1" aria-expanded="true">
test
<a class="current" href="test">test</a>
test
</div>
</li>
<li>
<i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" class="collapsed">test
</a>
</div>
<div class="collapse-styled collapse" id="collapseExample" aria-expanded="false" style="height: 0px;">
test
test
test
</div>
</li>
<li>
<i class="pull-left fa fa-map" aria-hidden="true"></i>
<a href="test">test
</a>
</li>
</ul>
</div>
</div>
css:
.sidebar-wrapper {
height: 100%;
overflow-y: auto;
background: #384a5a;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav {
font-size: 0.8125em;
}
.sidebar-nav i {
margin-top: 20px;
margin-left: 25px;
color: #3181cc;
}
.sidebar-nav li {
line-height: 60px;
border-bottom: 1px solid #455b6f;
}
.sidebar-nav li:nth-child(1) {
color: #3181cc;
background-color: #273440;
font-size: 1.5em;
height: 65px;
text-indent: 20px;
}
.sidebar-nav li.current {
background: #000;
}
.sidebar-nav li.current a {
color: #ffffff;
border-right: 5px solid #000;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #ffffff;
border-right: 5px solid #3181cc;
background: #2f3f4d;
}
.sidebar-nav li a {
display: block;
height: 65px;
}
.collapse-link a {
background-color: #2f3f4d;
border-right: 5px solid #3181cc;
}
.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: #ffffff;
margin-right: 20px;
background-color: #2f3f4d;
}
.collapse-link a.collapsed {
background-color: #384a5a;
border-right: 5px solid #384a5a !important;
}
.collapse-link a.collapsed:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #384a5a !important;
}
.collapse-link a.collapsed:after:hover {
background: #2f3f4d;
}
Working fiddle fiddle
add this css.
.collapse-link a.collapsed:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #2f3f4d !important;
}
.sidebar-nav li a:hover:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #2f3f4d !important;
}
please use this style sheet
.collapse-link a.collapsed::after {
background-color: rgba(0, 0, 0, 0);
}
I'm using a css-only push nav. It works great, however I can't figure out how to make the menu hide away when a nav link is clicked. You have to manually click the menu icon for the menu to go back into hiding. However, when a link is clicked and the site jumps to a section, I want the menu to slide into hiding automatically.
Here's a fiddle of it:
http://jsfiddle.net/ex7jthnn/28/
html:
<input type="checkbox" id="menu" name="menu" class="menu-checkbox">
<div class="menu">
<label class="menu-toggle" for="menu"><span>Toggle</span></label>
<ul class="mainnav">
<li><a class="text-right" href="#about">ABOUT</a></li>
<li><a class="text-right" href="#process">PROCESS</a></li>
<li><a class="text-right" href="#work">WORK</a></li>
<li><a class="text-right" href="#contact">CONTACT</a></li>
</ul>
</div>
CSS:
label{
cursor: pointer;
&:focus;
outline: none;
}
.menu{
position: fixed;
top: 0;
left: 0;
background-color: rgba(111, 206, 204, 0.7);
width: 240px;
height: 100%;
z-index: 10;
}
label.menu-toggle{
position: absolute;
right: -60px;
width: 75px;
height: 90px;
line-height: 0px;
display: block;
margin-top: 30px;
margin-right: -50px;
padding: 0px 0px 0px 20px;
text-indent: -9999px;
background: 50% 50% / 45px 32px no-repeat;
background-image:url(../images/menu.png);
}
a, label{
display: block;
text-align: center;
line-height: 50px;
text-decoration: none;
}
.menu-checkbox{
display: none;
}
.menu .menu label.menu-toggle{
background: none;
}
.menu-checkbox:checked + .menu{
transform: translate3d(0, 0, 0);
-webkit-transition: translate3d(0, 0, 0);
}enter code here
Try to add this piece of code into your website, it should make the job done.
$('ul.mainnav > li > a').on('click', function(e){
$('#menu').prop('checked', false);
});