I am trying to use this Mega menu, but I want to know what is the problem that safari doesn't support this menu and doesn't open the menu when clicking on it.
Here is the codepen link
I think this part is the problem not oppening the menu
`
// FUNCTIONALITY: Open mega menu
&:focus {
~ ul {
display: flex;
transform-origin: top;
animation: dropdown .2s ease-out;
}
}
`
Do we have a list to check if any CSS att. is not compatible with Safari or not?
Or is it a way to make this menu work on Safari by just changing some parts of the CSS?
I found the solution:
it was an easy fix.
an element that you want to have :focus on it, should have tabindex att like:
first
second
Then it will work on Safari and other browsers.
Related
Is there any animation support in Angular Bootstrap? I'm not seeing any built-in way to slide a collapse element in, out, up or down. It just pops when activated.
There is currently no support for animation in the ng-bootstrap Collapse, however it looks like it's on the roadmap (source: https://github.com/ng-bootstrap/ng-bootstrap/issues/295).
As it stands, you can add animations by using CSS - please see this demo for an example.
I've added the following CSS to the collapse-basic component in the demo which will fade in/out the element when the Toggle button is clicked:
.collapse, .collapse.show {
display: block;
transition: all 1s linear;
}
.collapse {
opacity: 0;
height: 0;
}
.collapse.show {
opacity: 1;
}
I'm using the WordPress twenty fourteen theme. Whenever the browser is re-sized to mobile view, automatically, the menu toggles up. So you have to click the toggle menu and the menu should slide down.
I want to make a smooth slide down transition to the menu whenever I click the menu toggle. By default the theme don't have any transition effect. I inserted some transition effect but it doesn't work. Is it possible for me to do it by CSS only? If yes how?
Do I need to work with the jQuery to solve this problem.
I am working with this website http://ash-malon.info/
Some of the code I inserted transitions, only the padding ease is working, I want the total ease effect when ever it slides down or up.
.primary-navigation {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
padding-top: 24px;
transition: all 500ms ease-in-out;
}
.primary-navigation.toggled-on {
padding: 72px 0 36px;
transition: all 500ms ease-in-out;
}
I would suggest to use jQuery since you've been already using a functions.js
I believe you want to apply the same effect with jquery slideToggle.
Here's a good example: jsfiddle
You can click here for more information about slideToggle.
You can replace the toggle JS you've added to the code below in your functions.js:
jQuery(document).ready(function($){
$('.menu-toggle').click(function(){
$('.menu-main-menu-container').slideToggle('slow');
});
});
And also you can remove transition: all 500ms ease-in-out; on your CSS.
I hope this will help.
I want all elements that are links to show consistent behavior.
a:hover { opacity: 0.5; }
This works in IE and Firefox, but the opacity (and associated CSS transition) is not properly applied to the child elements of the <a> tag in Chrome and Safari. If I add an explicit rule for a <div> as a child element, it works in Chrome and Safari:
a:hover, a:hover div { opacity: 0.5; }
So far so good, and this has been asked and answered before. The problem that I have is that by adding the rule for the containing <div>, the opacity gets applied twice in IE and Firefox, making the element too transparent.
I need to cover both scenarios - <a> wrapping a <div> or not, without writing lots of explicit CSS rules. How can I do that?
http://liveweave.com/fMsz7m
What worked for me in Safari was adding display: block into the a tag
a:hover {
opacity: 0.5;
transition: opacity 0.2s ease;
display: block;
}
I'm not sure whether this counts as a direct solution to your question (I'm not sure why the children aren't inheriting), but you can add display: block to the a in your css which will work (tested with Firefox and Chrome).
JSFiddle DEMO
An alternative is to assign the hover to your <div>, parent of <a>.
JSFiddle DEMO
I feel as though there are better solutions/explanations out there, maybe this one will spark an idea for someone else.
Options of select field are moving away from selected field inside the lightbox only on mozilla and working fine on Chrome.
Codepen demo
Add below CSS
.custombox-show.custombox-sign .custombox-modal-content {
transform: none;
transform-style: initial;
}
Codepen demo
First of all I have to say that I'm working on website which I can only manipulate its CSS.
So, please don't suggest me a javascript/html solution.
Here is my problem,
You can see in this jsFiddle demo, there is a basic toggle display method but it doesn't have a transitions effect on default CSS. The HTML is exactly like that, and I don't have a permission to change its HTML or javascript, I can only play with CSS.
I want to add CSS 3 Transitions effect to this toggle method.
As Jim Jeffers's answer on this question, transitions effect never works on
display: block < - > display: none
So I will always need to keep the element display block.
I tried this but it didn't work,
.infocontent {
-webkit-transition: opacity 1s ease-out;
}
div[style='display: block; '].infocontent {
opacity: 1; height: auto !important;
}
div[style='display: none; '].infocontent {
display:block !important; opacity: 0; height: 0px;
}
Why isn't it working? How can I do that?
Try to use transition on max-height instead of height.