Tagged: mobile menu
-
AuthorPosts
-
March 25, 2015 at 2:57 pm #417755
Hi,
I came a cross some scrips that would a great feature for the menu on a smartphone. What would be the best way to implement those JS without compromising the main them. IfI was was to use the child theme option where would I implement the JS? and how would I adjust the css to match the current menu?
it s simple hide and show menu on scroll up or down. Could be great for the main menu as an extra feature on the admin panel to.
https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78cThanks,
DMarch 25, 2015 at 3:01 pm #417759Hi dhuet!
You can add following code to Functions.php file of your child theme
function add_custom_menu(){ ?> <script> YOUR CODE GOES HERE </script> <?php } add_action('wp_footer', 'add_custom_menu');
Best regards,
YigitMarch 25, 2015 at 3:03 pm #417763thanks!
March 25, 2015 at 3:04 pm #417765Hey!
You are welcome! Let us know if you have any other questions or issues
Cheers!
YigitMarch 25, 2015 at 3:22 pm #417781This reply has been marked as private.March 27, 2015 at 2:41 am #419021Hi!
Please use “#header” selector instead of “.header” and it should work fine :)
Cheers!
YigitMarch 27, 2015 at 3:50 am #419063Hi!
Check the console, $ is not available so you need to wrap your JavaScript with a closure, like this:
function add_custom_script(){ ?> <script> (function($){ $(window).load(function() { // you can use $ here }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
Cheers!
JosueMarch 27, 2015 at 4:00 pm #419337Almost there! it does not seem to work on the mobile menu which is mostly the one i want to target.
Thanks,
DMarch 27, 2015 at 8:05 pm #419586The header gets position: relative; when viewed on smaller viewport, you’d need to somehow tell the header to remain fixed at all times, something like this:
#header{ position: fixed !important; }
Best regards,
JosueMarch 30, 2015 at 6:23 pm #420688Josue,
Is this how you recommend it:
function add_custom_script(){
?>
<script>
(function($){
$(window).load(function() {
// you can use $ here
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $(‘header’).outerHeight();$(window).scroll(function(event){
didScroll = true;
});setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);function hasScrolled() {
var st = $(this).scrollTop();// Make sure they scroll more than delta
if(Math.abs(lastScrollTop – st) <= delta)
return;// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is “behind” the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$(‘header’).removeClass(‘nav-down’).addClass(‘nav-up’);
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$(‘header’).removeClass(‘nav-up’).addClass(‘nav-down’);
}
}lastScrollTop = st;
}
});
})(jQuery);
</script>
<?php
}March 30, 2015 at 6:26 pm #420691I use this as css but it does not seem to work.
body {
padding-top: 40px; // same as header height
}#header{ position: fixed !important;
background: #ff4a54 !important;
height: 40px;top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -40px; }March 30, 2015 at 8:28 pm #420780Hey!
I’m sorry but this has implementation has fallen beyond our support scope, if you really need it you can request a customization here:
http://kriesi.at/contact/customizationBest regards,
JosueMarch 30, 2015 at 8:31 pm #420783Oh, Great. I like that you have this option now. Thank you so much.
-
AuthorPosts
- The topic ‘Mobile menu implementation’ is closed to new replies.