I have a word press site running the "The Retailer" theme. For some reason the sticky header does not appear on 1024 resolution. It works fine for any resolution above that.
Website: http://museiam.ca/
Here is my CSS for sticky header:
.gbtr_header_wrapper.site-header-sticky {
margin: 0;
padding: 25px 0;
position: fixed;
}
.site-header-sticky {
background: none repeat scroll 0 0 #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
display: block;
right: 0;
top: -98px;
transition: top 0.15s ease 0s, z-index 0s ease 0.15s;
width: 100%;
z-index: -1;
}
.site-header-sticky.on_page_scroll {
top: 0;
transition: top 0.3s ease 0s;
z-index: 9999;
}
Thanks for looking.
Line 13822 of style.css
#media screen and (max-width: 1024px)
{
/*sticky header*/
.site-header-sticky
{
display: none;
}
just remove
.site-header-sticky
{
display: none;
}
to make the sticky header continue to appear
but I would advise you against doing that because it will break the mobile styles
Related
Current Behaviour:
When hovering over a card/item in the grid. The extra information becomes visible (both margin -100% and position: absolute give the same result). When the information gets enabled with (content-visiblity: visible) it appears behind the next row not matter the z-index value.
Wanted/expected behaviour:
The information gets visible on and shows on top of all other content
Environment
Wordpress 6.0 (latest)
Theme: Hello Elementor
Page Builder: Elementor
DOM View and actual visual
Current CSS
selector:hover .non-hover-content {
content-visibility: hidden;
}
.hover-content {
position: relative;
z-index: 2;
content-visibility: hidden;
background-color: #1a1a1a
}
selector {
position: relative;
z-index: 1;
transition: all ease-in-out .25s;
border-radius: 10px 10px 0 0;
}
selector:hover .hover-content {
content-visibility: visible;
background-color: #1a1a1a;
}
selector:hover {
transform: scale(1.05);
box-shadow: 0 0 10px 0px #222;
/*background: var(--e-global-color-secondary);*/
}
this is my code:
.menu_item::after{
content: "";
display: block;
background-color: black !important;
width: 0px;
height: 2px;
transition: width 0.5s;
}
.menu_item:hover::after{
width: 100%;
}
.menu_item.active::after{
width: 100%;
}
It simply make a underline-like effect transition by make the width of the ::after content go from 0 to 100%, so indeed when the mouse leave the .menu_item the width go back from 100% to 0.
The problem is, the underline stay on 1px for some seconds after it goes back from 100% to 0px, and it's very unpleasant to see.
Is there something i can do or it's a thing i have to keep?
The problem appears under "Qualcosa su di me"
i just changed the color of the background-color of the .menu_item as the bg-color of the container, and added that to the transition:
.menu_item::after{
content: "";
display: block;
background-color: RGBA(190, 0, 40, 0);
width: 0px;
height: 2px;
transition: width 0.5s, background-color 0.7s;
}
.menu_item:hover::after{
background-color: black;
width: 100%;
}
.menu_item.active::after{
background-color: black;
width: 100%;
}
Doing so make it go "invisible" before displaying that 1px
I'm an absolute begginer when it comes to code (that's why I'm using elementor to build my site)
I'm trying to style the nav menu with custom css since the provided solutions look a bit ugly.
So far i have managed to create and "underline" hover effect that I'm happy with using CSS Hero.
I would like the underline to be permanent when I'm on the selected page.
So far I have managed to get an underline on the active menu but the hover animation keeps displaying on top.
I'm aware that the code is a mess, and that this is not the proper way to do this but It's the ebst I can do.
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item:before {
content: '';
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: ##212121;
height: 1px;
transition-property: left, right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item:hover:before,
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item:focus:before,
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item:active:before {
right: 0;
left: 0;
}
.elementor-6618 .elementor-element.elementor-element-faa673a .elementor-nav-menu--main .elementor-item.elementor-item-active{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #212121;}
Trying to do a button hover effect I stumbled upon this weird bug on IE.
It's happening even on IE11.
When you hover over the button the pseudo elements 'jump' their transition.
If you remove the padding, it stops!
I've been trying to work around it the whole afternoon, but I can't seem to find the problem.
Here's the demo: http://codepen.io/anon/pen/rVwRKL
HTML
Live Button
CSS
body
{
padding: 5em;
margin: 0;
}
a{
padding: 1em 1em;
margin: 0;
box-shadow: inset 0px 0px 0px 3px blue;
position: relative;
box-sizing: border-box;
display: inline-block;
}
a::before,
a::after
{
transition: width 0.4s ease, height 0.4s ease 0.4s, opacity 0.4s ease;
content: " ";
box-sizing: border-box;
width: 100%;
height: 100%;
display: block;
position: absolute;
border: solid 3px green;
display: inline-block;
}
a::after
{
right: 0;
bottom: 0;
border-right-color: transparent;
border-top-color: transparent;
}
a::before
{
left: 0;
top: 0;
border-left-color: transparent;
border-bottom-color: transparent;
}
a:hover::before,
a:hover::after
{
transition-delay: 0.4s, 0s, 0.7s;
width: 0;
height: 0;
opacity: 0;
}
Thanks!
Not sure if you ever got an answer to this Marlon but I've just come across basically the same issue with IE. Thankful I've managed to figure out the oddity in IE that is causing the issue.
It appears to be when you are mixing your measurement prefixes i.e. px, %, em, vw, etc...
In my issue I was going from a vw to px - this worked fine everywhere except IE. As soon as I changed my vw to a px everything worked fine.
In your example above it was even less obvious to spot. You have the before/after set to a width of 100% - % being the measurement. Then, in the hover state, you had them both simply set to 0 (zero) with no measurement. This is where the problem is because no measurement isn't the same as % which IE appears to struggle to figure out (?!?!?!). As soon as you add the % to the width/height on the hover state it works fine.
See working example here with the adjusted width/height: http://codepen.io/anon/pen/YyNWzw
Previous CSS
a:hover::before,
a:hover::after
{
transition-delay: 0.4s, 0s, 0.7s;
width: 0;
height: 0;
opacity: 0;
}
Adjusted CSS
a:hover::before,
a:hover::after
{
transition-delay: 0.4s, 0s, 0.7s;
width: 0%;
height: 0%;
opacity: 0;
}
Typically I would also never bother adding a measurement when the value is 0 (zero) but I guess if you're using transitions then IE requires it to match.
Hope this helps.
I'm trying to line up an animation I have made with the dot in an exclamation point of some text. It is currently the animation alone for our loading screen, and the code is as follows:
.loading-icon {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 0; height: 0; margin: auto;
#include border-radius(100%);
#include box-shadow(inset 0 0 0 $size/2 $c);
-webkit-animation: load $ease infinite;
}
#-webkit-keyframes load {
100% { width: $size; height: $size; box-shadow: none; }
}
$size is 60px $ease is 1s ease out and $c is just the color I'm using. Here is a codepen illustrating the animation: http://cdpn.io/CczlK
So, say I had a word like aaa!aaa and wanted to align the animation with it at the center of the page. I've been playing with a way to get it done in a hacky way but I really would like it to work across more than just my browser window. Currently to call the animation I have:
h1
aaa!aaa
.loading-icon
(it is written in emblem)
Ideas?
both your container and anim need to be centered, the text can remain center-aligned relative to its container. Then you change left and top position in the anim:
#loader
%h1
%span.label aaa!aaa
%span.spinner
then in your css
#loader {
position: absolute;
top : 50%;
left : 50%;
margin: -30px 0 0 -30px;
width : 60px;
height: 60px;
text-align : center;
h1 {
position : relative;
}
}
.spinner {
width : 0;
height : 0;
top : 0px;
left : 30px;
margin : auto;
display : block;
position: absolute;
#include border-radius(100%);
#include box-shadow(inset 0 0 0 $size/2 $c);
animation: load $ease infinite;
}
#keyframes load {
100% { width: $size; height: $size; left:0px; top:-30px; box-shadow: none; }
}
Edits in codepen: http://codepen.io/anon/pen/nIioD