-
AuthorPosts
-
April 14, 2016 at 9:30 am #613620
Any way to make the mobile menu re-appear when the user scrolls up? It’s a standard pattern on a lot of sites.
April 14, 2016 at 2:15 pm #613902April 14, 2016 at 4:20 pm #614068Sure – current version is at: http://new.btribble.com.
Why is it meant to behave like that already?
April 16, 2016 at 4:34 pm #615494Hi – any thoughts on this?
Thanks
April 16, 2016 at 7:21 pm #615525Hey!
It;s not entirely clear what you are trying to do but as i understand a menu appears when you scroll down the page and if you like to make that menu a fullscreen mobile menu please use the code below in Enfold > General Styling > Quick CSS
@media only screen and (max-width: 1024px) { nav.main_menu {display:none !important;} #advanced_menu_toggle, #advanced_menu_hide {display:block !important; } }
Cheers!
VinayApril 16, 2016 at 11:24 pm #615599Hi – sorry I didn’t make myself clear.
This is the pattern I want to create:
ON MOBILE VIEWPORT
1. User scrolls down – header and menu button scrolls out of view
2. When user scrolls *back up* – the header reappears
3. User can now either scroll down again, and header will scroll out of view.
4. OR user can select menu and tap through to another part of the site.Hope that explains it!
April 19, 2016 at 1:21 am #616967Hi!
Please try adding following code to Functions.php file in Appearance > Editor
function custom_blog_banner(){ if(wp_is_mobile() ){ ?> <script> // 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; } </script> <?php }} add_action('wp_footer', 'custom_blog_banner');
then add following code to Quick CSS in Enfold theme options under General Styling tab
.nav-up { top: -40px; }
Please note that i have not tested the code and that you would be only able to see the changes on mobile, resizing browser window would not work.
Best regards,
YigitApril 19, 2016 at 7:07 pm #617626I’ve added this and tested on the XCode iOS simulator, but it doesn’t seem to do anything. Can you confirm it’s working at your end?
Many thanks for your help!
April 20, 2016 at 2:03 am #617850Hey!
Can you please add following code to Quick CSS as well
.responsive #header { position: fixed; top: 0; width: 100%; }
If that too does not help, please hire a freelance developer or request such feature here – https://kriesi.at/support/enfold-feature-requests/
Cheers!
YigitApril 20, 2016 at 4:57 am #617970OK thanks, that didn’t seem to do anything. If anyone runs into the same problem, my solution was to just make the header fixed and transparent on scroll.
April 21, 2016 at 8:01 am #618981January 17, 2017 at 10:13 am #734612headroom.js works like a charm.
CSS.headroom { will-change: transform; transition: transform 200ms linear; } .headroom--pinned { transform: translateY(0%); } .headroom--unpinned { transform: translateY(-100%); } .headroom--unpinned--action { transform: translateY(calc(-257%)); }
JS
window.onload = function () { var mainHeader = document.querySelectorAll("header")[0]; var headroomMain = new Headroom(mainHeader, { "offset": 60, "tolerance": 10, "classes": { "initial": "headroom", "pinned": "headroom--pinned", "unpinned": "headroom--unpinned" } }); headroomMain.init(); };
helper-main-menu.php (includes/helper-main-menu.php)
<header id='header' class='all_colors header_color headroom <?php avia_is_dark_bg('header_color'); echo " ".$headerS['header_class']; ?>' <?php avia_markup_helper(array('context' => 'header','post_type'=>'forum'));?>>
You must download and add headroom.js library.
- This reply was modified 7 years, 10 months ago by talawar.
January 17, 2017 at 3:01 pm #734734April 2, 2017 at 1:30 pm #770618Hi @talawar,
thanks for your input!
I tried to follow your steps, but it’s not working yet.
I put the CSS into my child themes style.css and modified helper-main-menu.php as you suggested.
Then i am not so sure, if i did the following right. I uploaded Headroom.js to enfold-child/js/ and added your custom JS to a new file. I tried to register both files vie child-themes functions.php ( as suggested here https://kriesi.at/support/topic/custom-js/ ).
enfold-child/functions.php:
wp_register_script( 'sw_custom_java', $template_url.'/js/SW_custom_js.js', 'jquery', "1", true); wp_register_script( 'headroom_js', $template_url.'/js/Headroom.js', 'jquery', "1", true); wp_enqueue_script( 'sw_custom_java' ); wp_enqueue_script( 'headroom_js' );
any ideas, what i did wrong?
Thanks!
April 2, 2017 at 4:33 pm #770656Hi,
I am afraid making third-party scripts compatible with the theme is unfortunately beyond the support scope we offer. Sorry for that!
But here is some more info on headroom: http://wicky.nillia.ms/headroom.js/Best regards,
MikeApril 2, 2017 at 5:01 pm #770664Hi @Mike,
thanks for you reply. Although i understand, that third party scripts are not your business, could you say, wether my approach to install a custom JS from within the child-theme is making sense?
I am trying to do the custom JS include within the child-theme via child-theme/functions.php and child-theme/js/ for the JS Files (so that i don’t loose too much on a theme update). Are my enqueueing scripts making any sense in general for this setup (regardless if the scripts itself are working)? Is $template_url.’ referencing to “…/enfold/” or to “…/enfold-child/” ?
Hopefully @talawar might find the time to get back on this.
Best Regards,
Stefan
April 2, 2017 at 5:38 pm #770680Hi,
$template_url.’ is referencing to “…/enfold/”
For your child theme with the folder and file /enfold-child/js/Headroom.js
please try:wp_register_script( 'sw_custom_java', get_stylesheet_directory_uri().'/js/SW_custom_js.js', 'jquery', "1", true); wp_register_script( 'headroom_js', get_stylesheet_directory_uri().'/js/Headroom.js', 'jquery', "1", true); wp_enqueue_script( 'sw_custom_java' ); wp_enqueue_script( 'headroom_js' );
More info: https://kriesi.at/support/topic/how-to-add-custom-jquery-to-enfold-theme/#post-311208
Best regards,
MikeApril 2, 2017 at 7:45 pm #770723@thatsmyname in your child’s functions.php add the headroom.js before the custom.js (‘SW_custom_js.js’ in your case.)
NOTE: Code below uses custom.js not SW_custom_js.js.function custom_function() { wp_enqueue_script( 'headroom', get_stylesheet_directory_uri() . '/js/headroom.js', false, NULL, 'all'); wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), 2, true); }
April 2, 2017 at 8:39 pm #770732April 3, 2017 at 12:12 am #770788hi @talawar, are you setting any specifics via the enfold theme settings ui? i tried it with normal and transparent headers set to sticky and unsticky.
it’s not working yet, but the headroom class is pointing to the right header, since the full header disappears with:
.headroom { display: none !important; }
so i am not sure wether the code is running but interfering with other theme settings, or if it’s not running at all.
any ideas regarding possible interference?
Best Regards,
Stefan
April 3, 2017 at 12:24 am #770795i tried install it via the enfold/functions.php as well:
function avia_register_frontend_scripts() { $template_url = get_template_directory_uri(); $child_theme_url = get_stylesheet_directory_uri(); //register js wp_enqueue_script( 'avia-compat', $template_url.'/js/avia-compat.js', array('jquery'), 2, false ); //needs to be loaded at the top to prevent bugs wp_enqueue_script( 'avia-default', $template_url.'/js/avia.js', array('jquery'), 3, true ); wp_enqueue_script( 'avia-shortcodes', $template_url.'/js/shortcodes.js', array('jquery'), 3, true ); wp_enqueue_script( 'avia-popup', $template_url.'/js/aviapopup/jquery.magnific-popup.min.js', array('jquery'), 2, true); wp_enqueue_script( 'headroom', $template_url.'/js/headroom.js', false, NULL, 'all'); wp_enqueue_script( 'custom', $template_url.'/js/custom.js', array('jquery'), 2, true); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'wp-mediaelement' );
- This reply was modified 7 years, 7 months ago by thatsmyname.
April 3, 2017 at 12:58 am #770811i found out, that the custom.js and headroom.js are running by placing prompt(); messages at several points.
and i tried, similar as on http://wicky.nillia.ms/headroom.js/, to take simpler actions:
.headroom--pinned { display: block !important; } .headroom--unpinned { display: none !important; }
i set offset and tolerance to 0 in the custom.js, so the “display: none” part should have immediate effect. nothing happens so far.
April 3, 2017 at 1:17 am #770816i am not that firm in js, but i found at least, that right in the beginning of the headroom script, the constuctor is running into this. “!Headroom.cutsTheMustard” seems to be true and then, nothing more happens.
Headroom.prototype = { constructor : Headroom, init : function() { if(!Headroom.cutsTheMustard) { return; }
somewhere else read: “Headroom.cutsTheMustard is only true if browser supports all features required by headroom.” hm..
- This reply was modified 7 years, 7 months ago by thatsmyname.
April 3, 2017 at 1:44 am #770825finally it works on desktops.
two things were wrong. i had the wrong headroom.js file and it needs a sticky header. so next thing will be, to get it to work on mobile.
April 3, 2017 at 10:18 am #771003May 15, 2018 at 5:32 pm #957127@Thatsmyname: Did it also work on desktop with a mobile menu (burger)? That’s where I get stuck…
And which headroom.js did you use? Thanks!May 17, 2018 at 4:59 am #957892May 17, 2018 at 5:32 am #957907Hi @ravicski,
since it is one year ago that i tried it last time, i am not sure anymore what i did. Most probably i didn’t get it to work on mobile or it was too unstable regarding all those interfering theme settings.
I think i didn’t get past the point, where it worked with the desktop header but not with the mobile header. And since i want my site to be as stable as possible, the whole .js workaround approach seemed to much for what it was supposed to achieve.
Sorry for not having more details.
Best Regards, Stefan
May 19, 2018 at 6:48 am #958923October 3, 2018 at 6:55 pm #1017586This would be a great feature to add. Looks like a thing many new sites are adding. Example: mintz.com
-
AuthorPosts
- You must be logged in to reply to this topic.