Header Auto-Nav Transition-Delay
Permalink
Hi All,
First build out of a concrete5 site and super impressed, just one problem. Feeling ignorant on how to add a transition-delay to my auto-nav hidden layer so that the transition between menus isn't immediate.
Want to add the following to it's css, but don't want to do it incorrectly:
Any guideance would be greatly appreciated.
Thanks in advance!
Dave Niekamp
First build out of a concrete5 site and super impressed, just one problem. Feeling ignorant on how to add a transition-delay to my auto-nav hidden layer so that the transition between menus isn't immediate.
Want to add the following to it's css, but don't want to do it incorrectly:
transition-delay: 25s;
Any guideance would be greatly appreciated.
Thanks in advance!
Dave Niekamp
Thanks MrKDilkington,
Missed my '.' before the 25s....
I appreciate your informative answer.
In experimenting with the less code in my copied theme, I opened header.less under build and added a fourth parameter to the .transition line. It now reads as follows:
Fourth parameter is now showing up as transition delay.
I hope this also helps others. Thanks again!
Love Concrete5!!!!
Missed my '.' before the 25s....
I appreciate your informative answer.
In experimenting with the less code in my copied theme, I opened header.less under build and added a fourth parameter to the .transition line. It now reads as follows:
.transition(all .25s ease .25s);
Fourth parameter is now showing up as transition delay.
I hope this also helps others. Thanks again!
Love Concrete5!!!!
The CSS for the navigation in the Elemental theme is in the header.less file.
concrete\themes\elemental\css\build\header.less
In header.less on line 133, add an empty line and then add "transition-delay: 500ms;".
https://github.com/concrete5/concrete5/blob/develop/web/concrete/the...
Any changes made to files inside the concrete folder will be overwritten when concrete5 is updated. To prevent changes from being overwritten, you will want to create a copy of the Elemental theme.
This How-To includes instructions to copy the Elemental theme:
https://www.concrete5.org/documentation/how-tos/designers/how-to-cop...
I recommend a lower transition-delay time, somewhere around 500ms or less. Using "transition-delay: 25s;" will delay the navigation for 25 seconds.