Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Imitating menu bar behaviour

    General Discussion
    3
    8
    206
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      Benjaminb last edited by Benjaminb

      Hey. I'm building a site with a custom overlay menu. So I have made my menu button show/hide on scroll like Lay theme does natively, but Lay theme's menu bar also shows when moving the mouse to the top of the window - and for some reason I can't get the code for it to work.

      This is the site: link (it's a staging site)

      I made a JSFiddle to show what I'm trying to do: JSFiddle

      Basically using a div to detect when the cursor is hovering over it, and moving the menu button down so it's visible. Do you see a reason why jQuery('#detectMouse').hover( function () {} wouldn't work? Syntax? Wrong jQuery library? Nothing happens when hovering. I also tried mouseover/mouseenter/click, which also doesn't work.

      Any ideas? Or is there a better way to do this?

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @Benjaminb
        good question!

        Here is the solution:
        http://laytheme.com/documentation.html#custom-javascript

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • B
          Benjaminb last edited by Benjaminb

          Thank you, Marius, appreciate it. I got it to work after reading the Binding Click Events section. I totally missed that, because I thought it related to the "newpageshown" stuff above. Always read the manual...

          A follow-up question, if I may. I can't seem to get my menu button to drop down at the exact same time as the Lay theme navbar. Mine is close, but if you scroll down a tiny bit using the scroll bar you can see it's a little off. I'm using the same transition transition: top 350ms ease, bot 350ms ease; but the issue is finding the precise scroll amount where the menu shows/hides. But maybe you are using a totally different approach and it's not really comparable :) if so, I'll just say this is good enough.

          This is my code

          <!-- Hide and show menu on scroll -->
          <script>
          var didScroll;
          var lastScrollTop = 0;
          var delta = 40;
          var navbarHeight = jQuery('#menuHeight').outerHeight();
          
          jQuery(window).scroll(function(event){
              didScroll = true;
          });
          
          setInterval(function() {
              if (didScroll) {
                  hasScrolled();
                  didScroll = false;
              }
          }, 50);
          
          function hasScrolled() {
              var st = jQuery(this).scrollTop();
              
              if(Math.abs(lastScrollTop - st) <= delta)
                  return;
              
              if (st > lastScrollTop && st > navbarHeight){
                  // Scroll Down
                  jQuery('#menuHeight').removeClass('showmenu').addClass('hidemenu');
              } else {
                  // Scroll Up
                  if(st + jQuery(window).height() < jQuery(document).height()) {
                      jQuery('#menuHeight').removeClass('hidemenu').addClass('showmenu');
                  }
              }
              
              lastScrollTop = st;
          }
          </script>
          
          
          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @Benjaminb
            have a look into toogleClass . It might make things easier.
            Then you just add a class with the new position.

            Can you show your current work?

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • B
              Benjaminb last edited by

              You misunderstand, that wasn't my question. Sorry if I wasn't clear.

              I posted a link to my site in the OP, but here it is: http://www.pingout.net/stg_844b7

              My menu is working. I'm using the menubar from Lay theme, with a custom menu button which opens an overlay menu. That's all good.

              My issue is a small detail... If you try to scroll (especially using the scroll bar), the timing on when the two menus show/hide doesn't match exactly. I was trying to ask what at which values Lay theme shows/hides the navbar.

              But maybe it's not that simple :)

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @Benjaminb
                it is a bit difficult to access that piece of code right now.
                I think the MENU box needs to be exact the same size like the logo box.
                Then it might be a bit of try and error?

                The logo will go to the position: top: -75px;

                Hope you will figure that out!

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • L
                  lortnok last edited by

                  I am trying to create more or less the same overlay menu but somehow just doesn't work.

                  I found this tutorial: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp and copied the code to custom html, css, js. but css seems not working. Can you help me out, please? Thanks a lot in advance!

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Dear @Benjaminb
                    to understand: What exactly is the problem in this case now? :-D

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post
                    Post a link to where the problem is if possible, please <3
                    I don't answer or check forum DMs, please just post on the forum.
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                    Before you post:

                    Use the Search Feature. Maybe there is already a solution to your issue.

                    1. Update Lay Theme and all Lay Theme Addons
                    2. Disable all Plugins
                    3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                    4. When using a WordPress Cache plugin, disable it or clear your cache. Now see if your problem solved itself.
                    Go here, see if your problem is listed here:
                    Troubleshooting

                    When you post:
                    1. Post a link to where the problem is
                    2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                    Thanks!

                    Online Users

                    J

                    Recent Topics

                    • A

                      website error

                    • Website gone all blank after update 6.3.1

                    • S

                      can't update project category content

                    • C

                      lightbox: how to go back to project instead of home with back button

                    laytheme.com