Hide mobile menu on scroll

Comments

• chillwiddastill

  February 2017 Posts: 52

  this is exactly what I am after, but not sure the best way to set it up?
  
  http://codepen.io/andiio/pen/gspxJ
• Air

  February 2017 Posts: 10,970

  Hello:-)
  
  This is what our theme has by default. Just go to Customizing ▸ Header settings ▸ Type, variant, background ▸Sticky version ▸Hiding when scrolling down
  
  With kind regards.
• chillwiddastill

  February 2017 Posts: 52

  Thanks Air, however its only on the mobile version I need this function, as I want to keep it sticky on Desktop, but hide on mobile only. Is there a way I can control it either by viewport or device type?
• Air

  February 2017 Posts: 10,970

  Nope, there is no option for this, sorry.
  
  With kind regards.
• chillwiddastill

  February 2017 Posts: 52

  do you know where I can find the jquery that controls this to see if there is a way I can add some sort of variable? sorry to be a pain!
• Air

  February 2017 Posts: 10,970

  I will be honest and brutal: If you can't locate where is the script then you won't be able to tweak it. It is not simple change, but have to be carefully planned.
  
  Anyway script is in js/script.js look for headerHorizontal: function() {.
  
  Good luck!
  
• chillwiddastill

  February 2017 Posts: 52

  haha yes I couldn't agree more! but then I will never learn if I don't make mistakes on the way
  
  Thanks for the luck, I think i'm gonna need it
• Air

  February 2017 Posts: 10,970

  It is "hardcore" peace of code that is responsible for managing actions of sticky header, and this why I said that, as even I get lost there;-)
  
  However props for having big cohones ;-)
• chillwiddastill

  February 2017 Posts: 52

  haha I dunno about that, as a fallback think I might just keep it sticky and have position: relative for the mobile viewport which hides it successfully, but not ideal to have to scroll back to the top for the menu Maybe ill activate the scroll to top on mobile only as a work around!
  
  If I manage to find a fix (highly unlikely) ill let you know Something to consider for an update perhaps as I cant be the only one that wants a massive header to hide on a mobile device
• chillwiddastill

  February 2017 edited February 2017 Posts: 52

  I found a work around with css:
  
  @media screen and (min-width: 480px) { .header-horizontal #header.sticky-hide, .header-horizontal #header.hide-until-scrolled-to{ -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }
  
  This seems to work just as I need, with the hide on scroll option selected in the settings!
  
  

  Post edited by chillwiddastill on February 2017
• Air

  February 2017 Posts: 10,970

  chillwiddastill said: as I cant be the only one that wants a massive header to hide on a mobile device

  For now you are only one that is asking for it, to have different behavior of header depending on resolution:-)
  
  As your solution: if it works for you then this is most important. Bravo!
  
  With kind regards.
  
  
• chillwiddastill

  February 2017 Posts: 52

  well its here in case anyone else asks the same question at least.
  
  For most people, having the menu act the same way as the desktop would be fine, but for me I prefer to deliver a stronger UX by delivering content that works just as well on a mobile as it would on a desktop, which this would as you can remove the top header and free up the space to fit more on the screen and maximise the visual area!
  
  Such a relief that CSS can perform this task over more complex Jquery!
  
  I PM'd you about another issue regarding the slug used for the works categories. Hopefully my last request now before the site goes live!
  
  Thanks for all your help
• Air

  February 2017 Posts: 10,970

  chillwiddastill said: I PM'd you about another issue

  Yes your question was in queue as I was answering other people:-)
  
• chillwiddastill

  February 2017 Posts: 52

  Ah ok no worries, just making sure you got it
  
  Hurry up yea haha