i don't know what i'm doing wrong here but my nav doesn't stick to top of cart on safari also sometimes it doesn't work on other browsers which i really didn't understand how. I've tried position fixed for nav but none of my tries didn't work. Hope someone can help me to understand the issue here. Thanks in advance.
<div class="cart">
<nav>
...
</nav>
</div>
.cart {
position: fixed;
overflow-y: scroll;
z-index: 10;
width: 100%;
height: 100%;
right: 0;
top: 0;
transform: translateX(100%);
background-color: white;
color: #ffff;
transition: 0.3s;
}
nav {
font-family: abeja;
position: sticky;
position: -webkit-sticky;
z-index: 11;
top: 0;
left: 0;
width: 100%;
padding: 20px;
display: flex;
background-color: #fff;
color: gray;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 13px 0 rgb(230, 230, 230);
}
simply add position: -webkit-sticky;
Try like this
position: sticky;
position: -webkit-sticky;
Related
I am new to coding, I have tried various solutions from similar questions asked, but nothing seems to work.
I have the following problem:
I made a breadcrumb, including various divs with :before and :after elements - shaping them like connected arrows.
The problem is, I made an animation for the breadcrumb element to fade-in-down. However, no matter in what combination I tried -> The :after element does not animate properly, or at all.
It kinda just pops up after :before and the parent div .breadcrumb have finished sliding in. Can anybody help me here, or has anyone maybe have aa clue?
... I have tried animating the :after element separatly, with transition, with animation-delay etc...nothing seems to work...everything slides in fine from top, excep the :after element, which just pops up ugly after the animation from my ".breadcrumb" is finished.
<div class="breadcrumb_wrapper">
Lasermaschinen
Serien
Unterserien
Produkt
.breadcrumb_wrapper {
position: fixed;
display: flex;
align-items: center;
width: 100%;
height: auto;
margin-top: 120px;
text-align: center;
}
.breadcrumb_element {
padding: 0 2rem 0 2rem;
width: auto;
line-height: 32px;
min-height: 32px;
max-height: 32px;
background: var(--Breadcrumb-gradient);
position: relative;
text-align: center;
margin-left: 0.5rem;
color: var(--nav-text-color-and-general-background);
cursor: pointer;
text-decoration: none;
animation: fade-in-down 0.5s ease-in-out;
}
.breadcrumb_element:before {
content: "";
position: absolute;
top: 4.69px;
left: -11.32px;
width: 22.427px;
height: 22.427px;
background: var(--nav-text-color-and-general-background);
transform: rotate(45deg);
z-index: 1;
border-top: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
border-top-right-radius: 5px;
}
.breadcrumb_element:after {
content: "";
position: absolute;
top: 4.69px;
right: -11.6px;
width: 22.427px;
height: 22.427px;
background: var(--Breadcrumb-arrow-gradient);
transform: rotate(45deg);
z-index: 2;
border-top-right-radius: 5px;
animation: fade-in-down 0.5s ease-in-out;
}
#keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Without seeing your HTML code I just had to take a guess at how you need this but here is an example with the after pseudo element coming in from the top and sitting on top of the before pseudo. Hope this helps you get what you are looking for. You can have it come in from any direction that you want.
ul {
list-style: none;
display: flex;
overflow: hidden;
}
li {
margin-left: 20px;
margin-right: 20px;
position: relative;
}
li::before {
content: '';
width: 20px;
height: 20px;
background-color: green;
position: absolute;
right: -25px;
}
li::after {
content: '';
width: 20px;
height: 20px;
background-color: red;
position: absolute;
right: -25px;
top: -100px;
transition: all 1s;
}
li:hover:after {
top: 0;
}
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
I've got some css/html code. I wanna improve my "unhover" state by doing following: when I hover over a button there is a before element sliding from left to right. I can easily change it from right to left. However when I do the "unhover" action, before element slides in the opposite direction - from right to left. What I want to achieve is animating it's width from 100% to 0% but from left to right. What should I do to get the result?
https://codepen.io/trueFalse24/pen/YzKNgYm
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
}
}
}
I've modified your pen to get the effect by changing a few usages of the left and right properties. My edits are marked by comments below.
.container{
padding:0;
margin: 0;
box-sizing: border-box;
background: #3498db;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
a{
background: #7f8c8d;
padding: 20px 30px;
text-transform: uppercase;
color: #fff;
position: relative;
&:before{
content: '';
position: absolute;
top: 0;
right: 0; /* Replaced left */
width: 0%;
height: 100%;
background: rgba(236,240,241, 0.3);
transition: all 0.3s ease;
}
&:hover{
&:before{
width: 100%;
right: auto; /* Added */
left: 0; /* Added */
}
}
}
}
i use CSSGrid with an hover effect who works great on desktop, but i have a bug on mobile and can't find the problem.
You can see the page here, and look on desktop on mobile view: http://lafabutineuse.flywheelsites.com/realisations
I defined my image title and link to be absolute and 100% height of the div.
The code of my title on image:
h2 a, h2 {
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center;
padding: 10px;
padding-bottom: 10px!important;
text-align: center;
height: 100%;
z-index: 10000;
transition-property: background;
-webkit-transition-property: background;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}
and same code on hover but with differents colors:
h2 a:hover, h2:hover {
background: rgba(224,197,76,0.61);
color: white;
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center!important;
vertical-align: middle;
padding: 10px;
padding-bottom: 10px!important;
text-align: center!important;
justify-content: center;
display: flex;
height: 100%;
z-index: 10000;
}
I tried some codes to fix the problem but can't achieve to keep the same effect on mobile.
Do you have any idea please?
Thank you
You have not explicitly set position for .et_pb_grid_item on screens smaller then 980px - that's why your hover-link takes 100% of .et_pb_portfolio_items.
Set position: relative; for .et_pb_grid_item and that should fix the hover problem.
.et_pb_grid_item {
position: relative;
}
I have the following JSFiddle, which positions an "X" to the left of a pop-out window: http://jsfiddle.net/XDaEk/601/
CSS:
.x {
display: none;
position: fixed;
top: 25%;
left:60px;
transition: transform .25s ease-in-out;
}
.x:before {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 32px;
height: 0;
border-top: 3px solid black;
transform: rotate(45deg);
transform-origin: center;
}
.x:after {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 32px;
height: 0;
border-top: 3px solid black;
transform: rotate(-45deg);
transform-origin: center;
}
.alert-div {
display:none;
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
padding-left: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-top: 50px;
background-color: white;
color: white;
opacity:0.7;
overflow-y: auto;
}
HTML
<div class="alert-div2"> <div class="x"></div>Sed ut perspiciatis, unde omnis …</div>
If I copy this exact same CSS & HTML into my file on byethost.com, the "x" appears in the center of the screen. I surrounded the CSS with <style type="text/css"> </style> in the head. The HTML is in the body. I've tried copying this CSS & HTML into another JSFiddle and it works, so it seems to have something to do with Byethost.
There are no console errors related to this.
Here's the actual site. The button to show pop out is at the very bottom. It says "Post Message" http://carouseltest.byethost8.com/aplayground.php (Neither of the 2 errors on the console have to do with this code. They were there before I added this.)
Here's a photo of how it appears on Byethost: http://imgur.com/a/BSzER
Looks like position: fixed is being overridden (although it's difficult to be certain when it's not reproducible). Try updating to:
.x {
display: none;
/* add !important in case this is what's getting zapped and affecting layout */
position: fixed !important;
top: 25%;
left:60px;
transition: transform .25s ease-in-out;
}
I have this situation: https://jsfiddle.net/rozkvsdh/5/
A CSS Grid, simply, but in some items, I need to put a ribbon or another div.
It's impossible!
How can I do?
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
}
.ribbon-wrapper {
width: 85px; // the length should be not in px I think!
height: 88px; // the length should be not in px I think!
overflow: hidden;
//position: absolute; it doesn't work!
position: relative;
top: -3px;
left: -3px;
.ribbon {
font: bold 15px sans-serif;
color: #333;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
top: 15px;
left: -30px;
width: 120px;
background-color: #ebb134;
color: #fff;
}
}
you could use a pseudo and a data attribute :
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM
overflow can be used and background-clip can help to mimic ribbon standing a bit outside
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
vmin or vmax units could be used to set font-size to resize the ribbon via em on padding and coordonates.
The viewport-percentage lengths
are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
eventually, shadow can be added and linear-gradient can help to draw slanted shadow's parts.
Demo:
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 2px;
height: 100vh;
padding: 5px;
margin: 0;
box-sizing: border-box;
}
grid-item {
background-color: lightgreen;
background-clip: content-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 3px;
}
grid-item[data-class="new"]:before {
content: attr(data-class);
position: absolute;
font-size: 2vmax; /* update font-size */
top: 0.4em;
left: -1.3em;
padding: 0em 1.5em;
transform: rotate(315deg);
background-color:gold;
/* eventually add some shadow effects */
background-image:
linear-gradient(135deg, black 0.9em, transparent 1.15em),
linear-gradient(-135deg, black 0.9em, transparent 1.15em);
box-shadow: 0 0 3px;
}
<grid-item>see</grid-item>
<grid-item>full</grid-item>
<grid-item>page</grid-item>
<grid-item>then</grid-item>
<grid-item data-class="new">RESIZE</grid-item>
<grid-item>window</grid-item>
<grid-item>to</grid-item>
<grid-item>see</grid-item>
<grid-item>ribbon</grid-item>
<grid-item data-class="new">font&size</grid-item>
<grid-item>updates</grid-item>
<grid-item>F</grid-item>
<grid-item data-class="new">PRO</grid-item>
<grid-item>B</grid-item>
<grid-item>C</grid-item>
<grid-item>D</grid-item>
<grid-item>E</grid-item>
<grid-item>F</grid-item>
<grid-item>A</grid-item>
<grid-item>B</grid-item>
you need to put position: relative; on grid-item and then you can use absolute position on .ribbon-wrapper.
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.ribbon-wrapper {
width: 85px; // the length should be not in px I think!
height: 88px; // the length should be not in px I think!
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
.ribbon {
font: bold 15px sans-serif;
color: #333;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
top: 15px;
left: -30px;
width: 120px;
background-color: #ebb134;
color: #fff;
}
}
https://jsfiddle.net/thesouthstar86/rozkvsdh/6/
You can do it and also works for resize but it's a bit messy.
The spacer divs are there so you have the height. You need one on each side because you want PRO to be centered. We sacrifice 1px on each side to make this work and now ribbon-wrapper can be absolute
https://jsfiddle.net/rozkvsdh/9/
HTML
<grid-item>
<div class="ribbon-wrapper"><div class="ribbon">NEW</div></div>
<div class="spacer"></div>
<div>PRO</div>
<div class="spacer"></div>
</grid-item>
CSS
// this is new
.spacer {
height: 88px;
width: 1px;
}
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
position: relative; // added
}
.ribbon-wrapper {
width: 85px; // the length should be not in px I think!
height: 88px; // the length should be not in px I think!
overflow: hidden;
position: absolute;
top: 0; // edited
left: 0; // edited
}
The ribbon won't align left because it's an in-flow child of a flex container with justify-content: center. So both the ribbon and the content are centered side-by-side.
You can override that setting with margin-right: auto, which will left-align the ribbon, but it will also right-align the content.
You can insert an invisible spacer item to create equal balance in the container, keeping the content centered. But that's a bit involved and may be unnecessary.
Stick with CSS positioning properties. This will position the ribbon. Re-sizing it is another matter:
grid-item {
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
position: relative; /* establish nearest positioned ancestor for abspos containment */
}
.ribbon-wrapper {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.ribbon-wrapper .ribbon {
font: bold 15px sans-serif;
color: #333;
text-align: center;
transform: rotate(-45deg);
position: relative;
padding: 7px 0;
top: 15px;
left: -30px;
width: 15vw;
background-color: #ebb134;
color: #fff;
}
revised fiddle