8 replies · opened Jun 7, 2016
Hello Wondering how i can add some smooth transition/fade for the main nav when you click the hamburger toggle icon in small and xs layout to show the main navigation. I am currently using an overlay sidebar on my page and this has a nice smooth transition making the way main nav shows immediately look a little too immediate.
just the same way the dropdowns of the mega menus are revealed , just a little softer perhaps.
thank you
Matt
Hello,
This is currently not available Out of the Box. However, with some CSS Editing Fade Transitions is possible. Please consider adding the following CSS Code:
@media (max-width: 991px) {
#header-wrap { overflow: hidden; }
body:not(.top-search-open) #primary-menu > ul:not(.show),
body:not(.top-search-open) #primary-menu > div > ul:not(.show) {
display: block;
opacity: 0 !important;
height: 0;
-webkit-transition: height .4s ease, opacity .2s ease;
-o-transition: height .4s ease, opacity .2s ease;
transition: height .4s ease, opacity .2s ease;
}
#primary-menu > ul.show,
#primary-menu > div > ul.show {
opacity: 1 !important;
height: auto;
}
}This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Thank you very much for this, is there any way of fading or easing the speed of the way this nav drops down, so currently the toggle is clicked and the menu appears immediately and then the content fades in, what I would like is the initial menu appearance to be slower in some way fade in or in the same way as you have implemented the overlay side menu?
Hello,
The Navigation Menu currently works in a Different Way so modifying the Animation on this will take some time. Please allow us more 24 Hours for this so that we can provide you with a Different Solution. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Hello,
We have worked extensively on this for you and this is the only possible solution available at the moment: https://www.dropbox.com/s/8d2vrbtx8xh7zhd/mobile-menu-nav-animation.html?dl=1 . Check this out on your Mobile Device. Additionally, the Menu Container will now have a Fixed Height and it is now Scrollable for the Overflowing Content.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
This doesn't appear to work as the toggle menu does not activate the nav menu when locally or on my test sever. I uploaded it here:
http://matthewardmills.co.uk/OPL5/mobile-menu-nav-animation.html
Thanks
Matt
Hello,
We had actually updated the Primary Menu Trigger Functionality slightly for the Next Update and you are using the Older Version, which is why you are facing this issue.
Please find the following code in the js/functions.js File:
$('#primary-menu-trigger,#overlay-menu-close').click(function() {
if( $('#primary-menu').find('ul.mobile-primary-menu').length > 0 ) {
$( '#primary-menu > ul.mobile-primary-menu, #primary-menu > div > ul.mobile-primary-menu' ).toggleClass("show");
} else {
$( '#primary-menu > ul, #primary-menu > div > ul' ).toggleClass("show");
}
return false;
});and replace it with:
$('#primary-menu-trigger,#overlay-menu-close').click(function() {
if( $('#primary-menu').find('ul.mobile-primary-menu').length > 0 ) {
$( '#primary-menu > ul.mobile-primary-menu, #primary-menu > div > ul.mobile-primary-menu' ).toggleClass("show");
} else {
$( '#primary-menu > ul, #primary-menu > div > ul' ).toggleClass("show");
}
$body.toggleClass("primary-menu-open");
return false;
});This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
I have attempted to do that and updated the functions.js file but that doesn't seem to have made a difference.
Do I need to add some classes to my page which is here. I can see that there is a media query update added, but when I add that to my page below, which has additional inline css updates, the animation does not occur.
http://matthewardmills.co.uk/OPL5/topbar-menu-static-sticky-master-test.html
Regards
Matt
Hello,
We have just checked out your Website and the issue is that you have not Added all the Codes from the File we have provided you with in the Above Replies like the JS Code at the bottom which is why you are facing an issue. Please Download the File we have provided you and Add it to your Package/HTML Folder to see the Exact Result (make sure that the js/functions.js File is already updated as we had mentioned in our previous replies). Then add the Customized JS and CSS Codes accordingly.
This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard