-
AuthorPosts
-
May 27, 2024 at 9:48 am #1446689
Hi
A few days ago Mike provided me with a function to make sure that using the sticky menu on mobiles and tablets the anchors scroll correctly by adding the additional sticky menu of the ALB.
https://kriesi.at/support/topic/alb-full-width-submenu-sticky-on-mobile/The code works perfectly but only takes into account two screen sizes: < 989 and >990.
I would need an integration to be able to use it on three different screen sizes: <768 for mobiles < 989 for itablets and >990.
I tried to write it myself but couldn’t do it. I basically can’t write the middle line of code which should be something that looks like else if ((width >768 <990)) {Below is Mike’s code
function custom_change_offset() { ?> <script> (function($) { var width = $(window).width(); if ((width < 989)) { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 140 //offset }, 1000); return false; } } }); //Executed on page load with URL containing an anchor tag. if($(location.href.split("#")[1])) { var target = $('#'+location.href.split("#")[1]); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 140 //offset }, 1000); return false; } } } else if ((width > 990)) { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 150 //offset }, 1000); return false; } } }); //Executed on page load with URL containing an anchor tag. if($(location.href.split("#")[1])) { var targett = $('#'+location.href.split("#")[1]); if (targett.length) { $('html,body').animate({ scrollTop: targett.offset().top - 150 //offset }, 1000); return false; } } } }(jQuery)); </script> <?php } add_action( 'wp_footer', 'custom_change_offset', 99 );
May 27, 2024 at 12:20 pm #1446703Hey manurimini,
Thank you for the inquiry.
I tried to write it myself but couldn’t do it. I basically can’t write the middle line of code which should be something that looks like else if ((width >768 <990)) {
The condition should look something like this:
if (width > 768 && width < 990) {
Let us know if this works.
Best regards,
IsmaelMay 27, 2024 at 2:40 pm #1446726Thank you Ismael
I only changed the code a little bit
if ((width > 768 && width < 990)) {
Now it works like a charme!
Best Regards
Manu- This reply was modified 5 months, 4 weeks ago by manurimini.
May 27, 2024 at 8:26 pm #1446754Hi,
Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
RikardMay 28, 2024 at 3:06 pm #1446845Hi,
As I previously wrote the code works fine so we can close the topic.If I may suggest I would love to have the possibility to use a sticky menu on tablets and mobiles and be able to select it directly in the HEADER settings.
And have calculated by the theme all the top margins of the containers perfectly.Best Regards
Manu -
AuthorPosts
- The topic ‘Alb full width submenu sticky on mobile’ is closed to new replies.