orangechandesign Posted November 7, 2019 Share Posted November 7, 2019 (edited) Index pages with anchor links to the various sections of the index are a very common website setup nowadays. Unfortunately the anchor links do not work correctly on mobile. In my case, when clicking an anchor link doesn’t close the menu and scroll to the correct section. My idea of solution is to add a click event. When clicking the anchor link, the mobile navigation will close. But this function still not work at my website. Can anyone tell me is that anything I did wrong? My website: I-kinball.org (pw: treats) reference website: riverstonedigital.com (mobile version) This is the function I added: <script> //Anchor link fix function anchorLinks(){ Y.all("a.Mobile-overlay-nav-item").on('click',function(){ Y.one('body').removeClass('is-mobile-overlay-active'); }); Y.all("a.Mobile-overlay-folder-item").on('click',function(){ Y.one('body').removeClass('is-mobile-overlay-active'); }); } // DOM Ready Y.on('domready', function(){ anchorLinks() }); //RSD Mutation Boserver wrapper function RSD_init(){ anchorLinks(); } // add watch function to window.onload window.onload = RSD_watch; // watch function to look for page changes using Mutation Observer function RSD_watch() { MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var mo = new MutationObserver(function(mo) { var moCount = 0; for (var b = 0; b < mo.length; b++) { var c = mo[b]; if ("attributes" === c.type && moCount === 0) { RSD_init(); } } }); var options = { attributes : true, attributeFilter : ['id']}; mo.observe(document.body, options); } </script> Edited November 7, 2019 by orangechandesign jorohaco and timoneill 1 1 Link to comment
C-A Posted November 20, 2019 Share Posted November 20, 2019 @orangechandesign Looks like it's working now... How did you fix it? Link to comment
orangechandesign Posted December 3, 2019 Author Share Posted December 3, 2019 @C-A Add the following code to "code injection" --> "footer". <script> $('.header-menu-nav-item > a').click(function() { $('.header-burger-btn').click(); }); </script> MidnightClub, tanyad, timoneill and 2 others 4 1 Link to comment
tanyad Posted June 2, 2020 Share Posted June 2, 2020 Thank you, this worked perfectly. Link to comment
jy15 Posted February 19, 2022 Share Posted February 19, 2022 On 12/3/2019 at 8:04 AM, orangechandesign said: @C-A Add the following code to "code injection" --> "footer". <script> $('.header-menu-nav-item > a').click(function() { $('.header-burger-btn').click(); }); </script> Hello, I am still having trouble getting this working myself. Did you add the above to the footer in combination with the large block of code at the top of the thread to the header? Thanks, Joey Derrico Link to comment
Kykelikyvik Posted February 23, 2022 Share Posted February 23, 2022 On 12/3/2019 at 5:04 PM, orangechandesign said: @C-A Add the following code to "code injection" --> "footer". <script> $('.header-menu-nav-item > a').click(function() { $('.header-burger-btn').click(); }); </script> Hello! Im running into the same issue, and tried adding the above code without any luck. Is this code for 7.1? Any help would be much appreciated! Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 On 2/24/2022 at 3:16 AM, Kykelikyvik said: Hello! Im running into the same issue, and tried adding the above code without any luck. Is this code for 7.1? Any help would be much appreciated! You can consider forcing desktop nav appear on mobile. If you share site url, we can give the code to do this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Kykelikyvik Posted February 28, 2022 Share Posted February 28, 2022 On 2/27/2022 at 6:49 AM, tuanphan said: You can consider forcing desktop nav appear on mobile. If you share site url, we can give the code to do this Thanks Tuanphan, I might consider doing this if I dont find another solution for the burger-menu. I´d be very happy if you can help me with the code: https://pelican-harpsichord-rmwm.squarespace.com/ password: tran Link to comment
tuanphan Posted March 3, 2022 Share Posted March 3, 2022 On 2/28/2022 at 5:21 PM, Kykelikyvik said: Thanks Tuanphan, I might consider doing this if I dont find another solution for the burger-menu. I´d be very happy if you can help me with the code: https://pelican-harpsichord-rmwm.squarespace.com/ password: tran Add this code to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.header-menu-nav-item a').click(function(){ $('body').removeClass('header--menu-open'); $('button.header-burger-btn.burger').click(); }); }) </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Kykelikyvik Posted March 3, 2022 Share Posted March 3, 2022 Thank you very much for this!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment