-
AuthorPosts
-
February 14, 2019 at 5:35 am #1066784
Hi Team!
I want to achieve the following:
– Make the header (hamburger + logo) sticky on mobile
– Make the top bar NOT sticky on mobile
– When the top bar disappears off the top of the screen, the header occupies the top of the screenSo for each page load on mobile, the top bar and header appear. Then, as the user scrolls downward, the header moves to the top and stays there – while the top bar has disappeared off the top of the screen.
Can this be done using only theme options and CSS? Or does this require JS?
I’ve put a sample site in the Private Content.
Thanks for any help!
DFebruary 16, 2019 at 5:52 pm #1067735Hey sdigit,
Best regards,
VictoriaFebruary 16, 2019 at 11:56 pm #1067837This reply has been marked as private.February 19, 2019 at 2:56 pm #1068986Hi,
Sorry for the late reply, I took a look at your example site and then tested what you described on my localhost, and found that we can make the header sticky on mobile with this css:@media only screen and (max-width: 800px) { .responsive #top #wrap_all #header { position: fixed !important; } }
but to hide the top-bar on scroll we can use this jQuery:
(function ($) { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 100) { $("#header_meta").css('display', 'none'); } else { $("#header_meta").css('display', 'block'); } }); })(jQuery);
We could refine it a little better if we could see your Enfold build of the site, have you begun this yet or are you still working on a mockup?
Best regards,
MikeFebruary 19, 2019 at 4:11 pm #1069009Hello,
I’m also interested to stick my header at the top (this part) on mobile and iPad.
I’ve tried you css
@media only screen and (max-width: 767px) {.responsive #top #wrap_all #header {position: fixed !important;}}
it keeps the header together with the top bar almost in the middle of the screen. And putting(function ($) { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 100) { $("#header_meta").css('display', 'none'); } else { $("#header_meta").css('display', 'block'); } }); })(jQuery);
in my functions.php of the Child Theme destroyed all the website. So I deleted everything…
February 20, 2019 at 1:17 am #1069226Hi,
@Anton I’m sorry, I was trying to hurry and the jQuery was just the raw script and not formatted for WordPress, if you want to try it try this code below. This works on my localhost, but unless I see the page in question I can’t be sure that the settings are the same.
The css does make the “header” sticky which includes the topbar. Again I would need to see the site to see why it might not work for you.function custom_script(){ ?> <script> (function ($) { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 100) { $("#header_meta").css('display', 'none'); } else { $("#header_meta").css('display', 'block'); } }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_script');
Best regards,
MikeFebruary 20, 2019 at 9:52 am #1069345Hi @Mike,
the code does work now, but there are some adjustments to be done that I can’t do on my own. My website is http://www.newpointdeview.com/blog-en/. For the moment I’ve /*suspended*/ the css code in the Quick CSS, but kept the script in the functions.php.
1. The breadcrumb went to the top : picture
2. The header (without topbar) remains sticky in the middle of the screen : picture
3. The code doesn’t work on iPad
4. Is it possible to reproduce the same sliding effect of the header while scrolling on mobile and iPad, like on the big screens ? With the given code the header behaviour is jerky.May I give here a temporary acces to my admin in the Private Content ?
February 20, 2019 at 4:20 pm #1069519Hi,
@Anton, I would not recommend including your login here, as this is not your post, your details will not be private.
Perhaps it would be better to open your own thread.
I don’t know why it would not work on an iPad, but I did find a topic that points to scroll not working with iPad, unfortunately, I don’t have an iPad to test with.Best regards,
MikeMay 9, 2019 at 11:24 am #1098862Hi Enfold team,
It would be very 2019 to have an option in the backend to choose if you want the mobile menu to stick to the header.
What do you think?Julia
May 10, 2019 at 10:37 pm #1099434February 19, 2020 at 2:35 pm #1186059Hi Mike,
This is still not working in the latest version. Any ideas when to expect it in development?
February 20, 2020 at 1:03 pm #1186324Hi,
Sorry, I don’t see any, not all feature requests make it into development.
But I understand a new feature requests page is going to be added shortly so it will be another opportunity to submit it for review.Best regards,
MikeFebruary 20, 2020 at 1:52 pm #1186356Can you submit this request for a review? Since it is mobile first, we really miss the option to have the menubar stick to the top on mobile devices.
Love to hear from you.
Regards,
JuliaFebruary 22, 2020 at 1:02 pm #1186950February 28, 2020 at 11:25 am #1188802Hi, this worked for me very well! Thank you.
To avoid overlapping header with page content I also inserted code by Yigit, found here:
https://kriesi.at/support/topic/mobile-sticky-header-hiding-content/February 29, 2020 at 11:00 am #1188995 -
AuthorPosts
- The topic ‘Mobile: Sticky header and NON-sticky Top Bar’ is closed to new replies.