RocketTheme - TOPIC: Gantry as one page

Welcome Guest! Login

0 items Join Now

- PreArt
- Sr. Rocketeer
- Posts: 107
- Thanks: 0
Gantry as one page - mobile menu not hiding

Posted 9 years 2 months ago
- Hello.
  I am making one page on gantry 5: muwo1.zawada.kylos.pl/ . Menu has anchor links (#section1, #section2...)
  On mobile devices, when I click menu element, page goes down, but menu stays visible. How can I hide this menu on mobile when clicking on link?
#1270557
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: Gantry as one page - mobile menu not hiding

Posted 9 years 2 months ago
- When you are using bookmarks (anchors) they do not refresh the page. Therefore the mobile menu will no close. There is no way around this. All the anchor does is make the page scroll to that point... you're not leaving the page you are already on.
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1270565

PreArt
Sr. Rocketeer
Posts: 107
Thanks: 0

Re: Gantry as one page - mobile menu not hiding

Posted 9 years 2 months ago

I found a solution.

<script type="text/javascript">
 
if($(window).width() <= 767){ 
 
document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("A");
  for(var i=0; i < links.length; i++) {
    if(!links[i].hash) continue;
    if(links[i].origin + links[i].pathname != self.location.href) continue;
    (function(anchorPoint) {
      links[i].addEventListener("click", function(e) {
        anchorPoint.scrollIntoView(true);
window.location.reload(true);
        e.preventDefault();
 
      }, false);
    })(document.getElementById(links[i].hash.replace(/#/, "")));
  }
}, false);
 
}
</script>

Add code in /templates/g5_hydrogen/custom/engine/templates/page.html.twig
It makes anchor links reload the page, only when mobile menu works - 767px

#1270576

- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: Gantry as one page - mobile menu not hiding

Posted 9 years 2 months ago
- Well, ok I am glad that you found a solution writing some javascript but I do have some comments.
  
  1. You should not hack core Gantry 5 - any update would overwrite that code you added. It's unnecessary too as you can add that on the "page settings" of the base outline either as an asset, or in the "head" section or as a custom css/js atom.
  
  2. The breakpoints in Gantry 5 are not static values, they can be changed on the "styles" tab of the base outline (at the very bottom) therefore you should be using that value and not hardcoding it (ie. don't code 767px).
  
  3. When you finalise your code so it can work generically, may I suggest that you raise a github issue on Gantry 5, I am sure our developers would love to incorporate your solution into Core Gantry 5 too (and you'll get a named credit in Gantry 5 for the suggestion). https://github.com/gantry/gantry5/issues
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1270578

Time to create page: 0.064 seconds