Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Disable Logo in Header Menu until you scroll

Disable Logo in Header Menu until you scroll

Scheduled Pinned Locked Moved General Discussion
7 Posts 3 Posters 136 Views
  • 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.
  • D Offline
    D Offline
    daxmann
    wrote on last edited by daxmann
    #1

    Hey There I am currently working on my website: http://www.badkidsproduction.com/

    And I would love to have the logo in the menu bar (top left) to disappear until you scroll below the fullscreen video slider, because I dont want to see it twice.

    Is there a way to do this?

    Thank you! :)

    Mischa

    1 Reply Last reply
    0
    • F Offline
      F Offline
      felix_rabe
      wrote on last edited by felix_rabe
      #2

      if you have some css skills, you can work with a script like this:

      <script>
      window.laytheme.on("newpageshown",function() {

      var logo = jQuery("#mylogo");
      jQuery(window).scroll(function() {
          var scroll = jQuery(window).scrollTop();
          if (scroll >= window.innerHeight-100) {
              /*logo.removeClass("visible");*/
              logo.addClass("invisible");
          } else {
              logo.removeClass("invisible");
              /*logo.addClass("visible);*/
          }
      });
      

      });
      </script>

      1 Reply Last reply
      0
      • D Offline
        D Offline
        daxmann
        wrote on last edited by
        #3

        And If I dont have any css skills? :D

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #4

          Thank you @fr for the above code! :)

          @daxmann Your Logo upon scrolling down the page will be given a class called 'invisible'

          You can give this new class some CSS that will in turn affect your Logo - '#mylogo' E.g:

          .invisible{
             display:none;
          }
          

          https://www.w3schools.com/css/css_display_visibility.asp

          .invisible{
              visibility:hidden;
          }
          

          https://www.w3schools.com/cssref/pr_class_visibility.asp

          .invisible{
              opacity:0;
          }
          

          https://www.w3schools.com/cssref/css3_pr_opacity.asp

          They have different properties so choose what suits your needs.

          Custom Code can be added within > Lay Options > Custom CSS & HTML >

          Also:
          https://laytheme.com/documentation.html#custom-css-styling

          Hope this helps and best wishes
          Richard

          1 Reply Last reply
          0
          • D Offline
            D Offline
            daxmann
            wrote on last edited by
            #5

            Thank you both so much for your support so far! So It works! <3
            There is only one problem, I rearranged the code a little bit because the code above was the wrong way (Logo disappeared when scrolling below the fullscreen slider, I wanted it the other way around)

            So the code Rn is like this:

            <script>	
            	window.laytheme.on("newpageshown",function() {
            
            var logo = jQuery(".sitetitle.img");
            jQuery(window).scroll(function() {
                var scroll = jQuery(window).scrollTop();
                if (scroll >= window.innerHeight-100) {
            
            		        logo.removeClass("invisible");
                    /*logo.addClass("visible);*/
                } else {
                    /*logo.removeClass("visible");*/
                    logo.addClass("invisible");
                }
            });
            });
            </script>
            

            The only thing right now is that the logo is shown when you load the site, by the moment you scroll it disappears and when you scroll below the fullscreen slider it appears. I want the logo to not be shown at the beginning when you load the site, it should only appear for the first time if you scroll below the header area. Can you help me with that?

            And second question: Is there a way to only have this behavior on the landing page and not on sub pages? I added the script in the header file, so its global right now - I am using a category page as a landing page.

            All the best

            Mischa

            1 Reply Last reply
            0
            • F Offline
              F Offline
              felix_rabe
              wrote on last edited by felix_rabe
              #6

              for your 2nd question try this:

                     <script>	
                      	window.laytheme.on("newpageshown",function() {
              
                          if (window.location.pathname == "/") {
               
                          var logo = jQuery(".sitetitle.img");
                          jQuery(window).scroll(function() {
                          var scroll = jQuery(window).scrollTop();
                          if (scroll >= window.innerHeight-100) {
                      
                      		        logo.removeClass("invisible");
                              /*logo.addClass("visible);*/
                          } else {
                              /*logo.removeClass("visible");*/
                              logo.addClass("invisible");
                          }
                      });
                      }
                      });
                      </script>
              

              BTW: now that you have the frame, I would recommend you to use google as well to optimize this for your needs :-) There is an answer somewhere for questions like "hide logo/div when page loads" etc.

              1 Reply Last reply
              0
              • D Offline
                D Offline
                daxmann
                wrote on last edited by
                #7

                This is perfect. Thank you so much!

                1 Reply Last reply
                0
                Reply
                • Reply as topic
                Log in to reply
                • Oldest to Newest
                • Newest to Oldest
                • Most Votes


                I also code custom websites or custom Lay features.
                šŸ’æ Email me here: šŸ’æ
                info@laytheme.com

                Before you post:
                1. When using a WordPress Cache plugin, disable it or clear your cache.
                2. Update Lay Theme and all Lay Theme Addons
                3. Disable all Plugins
                4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                This often solves issues you might run into

                When you post:
                1. Post a link to where the problem is
                2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                Online Users
                Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                laytheme.com
                • Login

                • Don't have an account? Register

                • Login or register to search.
                • First post
                  Last post
                0
                • Recent
                • Tags
                • Popular
                • Users
                • Search