Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
February 19, 2022 at 12:37 am #1341381
Hi,
Is there a way to enable the menu on mobile so that it reappears at the top of the screen when a user is scrolling back up the page(s)?
Alternatively, is it possible to have the “Return to Top” carat appear on mobile? I only notice it when I’m developing in desktop mode.February 20, 2022 at 2:38 pm #1341497Hey transmodiar,
You can show the “scroll to top” arrow button on mobile with this css in your Quick CSS:@media only screen and (max-width: 767px){ .responsive #top #scroll-top-link { display: block; } }
After applying the css, please clear your browser cache and check.
To show the mobile header on scroll up, Try adding this code to the end of your functions.php file in Appearance ▸ Editor:
function hide_header_on_scroll_down_show_on_scroll_up() { ?> <script> (function($) { 'use strict'; var $window = $( window ); var lastScrollTop = 0; var $header = $( '#header_main' ); var headerBottom = $header.position().top + $header.outerHeight( true ); $window.scroll(function() { var windowTop = $window.scrollTop(); if ( windowTop >= headerBottom ) { $header.addClass( 'myprefix-maybe-sticky' ); } else { $header.removeClass( 'myprefix-maybe-sticky' ); $header.removeClass( 'myprefix-show' ); } if ( $header.hasClass( 'myprefix-maybe-sticky' ) ) { if ( windowTop <= headerBottom || windowTop < lastScrollTop ) { $header.addClass( 'myprefix-show' ); } else { $header.removeClass( 'myprefix-show' ); } } lastScrollTop = windowTop; }); }(jQuery)); </script> <?php } add_action('wp_footer', 'hide_header_on_scroll_down_show_on_scroll_up');
Then add this code in the General Styling ▸ Quick CSS field:
@media only screen and (max-width: 767px) { .myprefix-maybe-sticky { position: fixed !important; top: -100px; width: 100%; z-index: 999; opacity: 0; background: #fff; transition: 0.3s all; box-shadow: 0 2px 3px rgba(0,0,0,0.15); } .myprefix-show { top: 0; opacity: 1; } }
Best regards,
Mike -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.