Does anyone know how to show the 'mmenu icon-bar' at the right side of the page in stead of the left?
body {
overflow-x: hidden; }
.mm-page {
background: inherit;
min-height: 100vh;
position: relative;
-webkit-transform: translate(60px);
transform: translate(60px);
padding-right: 60px;
}
.mm-menu:first-child, .mm-menu.mm-current {
display: block; }
Try moving the padding from right to left and the translate from left to right:
.mm-page {
-webkit-transform: translate(-60px);
transform: translate(-60px);
padding-left: 60px;
}
Related
I am creating a side navigation panel and I can't seem to figure out how to change colour of the text in link when I hover over it. The background colour changes. It actually worked before I added the animation but I wouldn't want to pass out on the animation.
.sidenav-navigation {
list-style: none;
padding: 1rem;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
.sidenav-navigation-items {
width: 100%;
margin-bottom: 0.5rem;
border-radius: 2rem;
cursor: pointer;
.sidenav-navigation-link {
display: flex;
align-items: center;
height: 3rem;
color: white;
text-decoration: none;
.sidenav-navigation-link-icon {
font-size: 22px;
width: 2rem;
min-width: 2rem;
text-align: center;
}
.sidenav-navigation-link-text {
text-align: center;
margin-right: 0.5rem;
animation:fadeIn 0.7s;
}
}
}
}
.sidenav-navigation-items:hover{
.sidenav-navigation-link {
transition: all .1s ease;
border-radius: 0.25rem;
background-color: white;
color: black;
}
}
#keyframes fadeIn{
0%{opacity:0;}
50%{opacity:50%;}
100%{opacity:100%;}
}
Probably white color style has higher priority due to more specific rules. Try to use !important rule with lower prio style.
.sidenav-navigation-items:hover{
.sidenav-navigation-link {
transition: all .1s ease;
border-radius: 0.25rem;
background-color: white;
color: black !important;
}
}
Other option may be changing the way of rules nesting to below:
.sidenav-navigation {
.sidenav-navigation-items {
.sidenav-navigation-link {
color: white;
}
&:hover {
.sidenav-navigation-link {
color: black;
}
}
}
}
How can i add arrow bullets in ck-editor?
currently i can see only square,disc,and circle.
enter image description here
You can create your own li bullets using :before pseudo elements
ul {
list-style: none;
}
li {
position: relative;
}
li:before {
content: '';
background: url('https://vignette3.wikia.nocookie.net/arrow/images/6/64/Favicon.ico/revision/latest?cb=20121123054146') no-repeat center center;
display: block;
left: -20px;
top: 3px;
width: 16px;
height: 16px;
position: absolute;
}
<ul>
<li>Text</li>
<li>Trext</li>
<li>Tesfd</li>
<li>Tesddf</li>
</ul>
I've been looking through the slick-theme.css and I can't figure out how to hide the numbers inserted after the dots.
Can anyone enlighten me?
The official solution is this according to slick.css
.slick-dots li button {
font-size: 0;
}
The best way would it be to create your own dots on a pseudo element, since the dots you see come from the list-item.
That's how slick is doing it for their own theme:
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:before {
content: '•';
font-size: 22px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
text-align: center;
opacity: .25;
color: black;
}
Adding this worked for me
.slick-dots li button {
display: none;
}
Numbers can be removed by using the text-indent property.
.slick-dots li button {
text-indent: -9999px;
}
You can remove text of the button with javascript like this:
var dotNums = document.querySelectorAll(".slick-dots button");
function removeText(item) {
item.innerHTML = ""; // or put the text you need inside quotes
}
dotNums.forEach(removeText);
This is what I did to remove the numbers from the dots.
solution 1
setTimeout(function(){ const dots = document.querySelectorAll('.slick-dots li button') dots.forEach(dot=>dot.innerHTML="") },1000)
.slick-dots li button doesn't happen to be part of the DOM when the page loads. it's is added after the slider start sliding.
Recommended solution
.slick-dots li button {
text-indent:-1000
}
you can use jquery to remove the dots
Docs
$('.your-slider').slick({
dots: false
});
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).
http://jsfiddle.net/egEq2/
.badge {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 1s ease-in;
width: 100%;
height: 100%;
}
.back {
-webkit-transform: rotateY(180deg);
overflow: hidden;
}
.front {
}
.product-action {
display: inline-block;
}
.product-action:hover .back {
-webkit-transform: rotateY(0deg);
}
.product-action:hover .front {
-webkit-transform: rotateY(-180deg);
}
... works, but flips too slow, can I change the speed?
Also, can I add width somehow so the flip looks like a board and not a thin paper? :)
Thanks!
You specified the speed already:
-webkit-transition: -webkit-transform 1s ease-in;
^^
Change it to something like 0.3s: http://jsfiddle.net/egEq2/1/