Add smooth transition effect on menu toggle (Twenty Fourteen WordPress Theme) - wordpress

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.

Related

Customized border-bottom for links is also shown on images and navigation

I'm currently setting up a wordpress website and would like to customize the design of links. I made use of the following code:
a:link {
color: inherit;
transition: color 0.1s ease-in 0s, background-color 0.1s ease-in 0s, border-bottom-color 0.1s ease-in 0s;
text-decoration: none;
border-bottom: 1px solid rgb(238, 0, 0);
}
a:hover {
color: rgb(238, 0, 0);
border-bottom-color: rgb(238, 0, 0);
}
But after using this code basically everything got the border-bottom design. Menulinks, the logo, images with links etc. are shown with border-bottom after adding this code. But I would like to have this design applied only to external links and internal links within content. How to distinguish here, does anybody have an idea?
With a plugin I was able to add classes to at least the external links, but I don't have a clue how to also apply this to the internal links which are within content and not in the menu, logo, images etc.
Many thanks in advance for help!
Assuming that what you want is to add your new styles only to links inside body text:
with the CSS you have right now, everything that is wrapped in an <a> tag is going to have these styles applied. What you want to do is specify your CSS selectors more. Try and right click -> inspect a link you want those styles to be applied to, and figure out if the inline links have any kind of unique class applied to them (i.e "link_inline"), then you would for example do a.link_inline {/* your CSS */}.
Another method would be to find a unique class of any parent element of all text on the page (i.e "content_wrapper"). Then you would do .content_wrapper a {/*your CSS */}

Transition on menu open/close

I create this very simple layout in which there are a button that user can click to open and close the menu.
I try to add a CSS transition when menu is opening/closing but it seems not to work.
This is the div that should be use the transition:
<div className={`${isMenuOpen ? "w4" : "w-0"} bg-yellow transition`} />
.transition {
transition: all 1.5s ease;
}
Why?
The problem is that .w-0 doesn't have a defined width. The transition property needs an initial value to transition from.
Just add this to your CSS file:
.w-0 {
width: 0;
}

WP Bakery Tab Animation Override

I am trying to override WP Bakery's tab animations, which slides content vertically in and out of view. I am a front end designer with limited JS experience. The site runs a theme, but from what I can tell in the code, the tabs and animations are coded as Bakery components.
Just looking for some code to override this thing! Reference to this ability seems to be completely unavailable elsewhere from my research. Thanks!
I was able to remove the vertical animation from the visual composer bakery tab and pageable container components by using this CSS. I had to specify top and bottom css classes depending on the position of the tabs. This example is verbose to show how to over-ride the vertical animating on all popular browsers. Essentially you need to set transform and transition to none on the .vc_tta-panel-body. I wanted to add a custom fade in effect to the panels so I added the fadein animation to the same css classes below the transform and transition over-rides.
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-panel .vc_tta-panel-body,
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-bottom .vc_tta-panel .vc_tta-panel-body {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-sand-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Found this CSS snippit via Google which states:
.vc_tta-panel.vc_animating {
opacity: 0;
}
This hides the vertical animation, am also looking for a JS fix.

CSS color transition triggers multiple animations when loading the website

This is my first question in this forum so if it's not well explained, feel free to ask me for more details.
I have a color transition in all the links on my navbar, that triggers when you hover your mouse over them. This work wells, the problem is that when the website loads, all those elements began to resize or move to their initial positions.
CSS
nav{
height: 80px;
width: 100%;
background-color: rgba(250,250,250,1);
font-size: 13px;
border-bottom: 1px solid #D8D8D8;
color: #6E6E6E;
position: fixed;
margin-top: -80px;
}
nav a{
padding: 20px 20px;
line-height: 80px;
-webkit-transition: all 0.8s;
transition: all 0.8s;
}
nav a:hover{
color:#00BFFF;
}
UPDATE
I have tried to make a JSFiddle with the problem, but even when the CSS and HTML is exactly the same its seem to work correctly on the demo
I have changed the transition property from all to color. This has solved the problem partially, since now the elements don't move when the page loads, but the problem now is that all links that include this color transition, when the website loads, show an initial blue color (inexistent in my CSS) taking the transition time to change to the correct color. This initial blue color is similar to the visited links standard color (but I have also used the selector a:visited without positive result.
This only happens on Firefox.
As due to my low reputation I can't post images, I have taken the blue initial tone: RGB (6,6,231)
You only need animate the color:
-webkit-transition: color 0.8s;
transition: color 0.8s;
note that I change all for color only.
note 2 you can do
transition: color 0.8s, height 0.2s ease-out, opacity 1s linear 0.5s;
Try adding script tag at footer of the html page.This worked for me.
<script> </script>

How to convert a display toggle effect to CSS 3 Transitions effect

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.

Resources