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. Hide menu bar and site title on cover section

Hide menu bar and site title on cover section

Scheduled Pinned Locked Moved General Discussion
6 Posts 3 Posters 737 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.
  • 1 Offline
    1 Offline
    12b
    wrote on Aug 10, 2018, 9:18 AM last edited by
    #1

    I am looking to hide the menu and site title bar when the cover is visible. Once the user has scrolled to the main body of the page the site title and menu should be visible.

    See site I am working on here: http://sarahlyallinteriors.co.uk/dev-home

    Is there a way to make this work? Not sure what CSS might be needed.

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mariusjopen
      Global Moderator
      wrote on Aug 10, 2018, 10:29 AM last edited by
      #2

      Dear @12b
      on the example I do not see a hidden nav-bar.
      But I know what you mean.

      You could hide it with CUSTOM CSS and make it appear with jQuery when the Second row reached the top of the browser.

      You know how to do that?

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • 1 Offline
        1 Offline
        12b
        wrote on Aug 10, 2018, 10:34 AM last edited by
        #3

        I don't know how to do that instinctively but if you could direct me in how this might be done i'd love to give it a go!

        Let me know :)

        1 Reply Last reply
        0
        • M Offline
          M Offline
          mariusjopen
          Global Moderator
          wrote on Aug 11, 2018, 4:47 PM last edited by
          #4

          Dear @12b

          you use this to see if an element reaches the top:
          https://stackoverflow.com/questions/7543718/test-in-jquery-if-an-element-is-at-the-top-of-screen

          Then you add a class to the navigation-bar to make it appear again.

          Beware that you need to use the jQuery like this:
          http://laytheme.com/documentation.html#custom-javascript

          Let me know if that works for you.

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • D Offline
            D Offline
            David22
            wrote on Mar 18, 2019, 10:08 AM last edited by
            #5

            Hi Marius,
            could you explain a little bit further on how to do this?
            I also want to move the navigation under the cover module.
            Thanks!
            David

            1 Reply Last reply
            0
            • M Offline
              M Offline
              mariusjopen
              Global Moderator
              wrote on Mar 21, 2019, 10:35 AM last edited by
              #6

              Dear @David22

              there are many good tutorials out there which explain how to hide a div box on scroll with jQuery.

              To have the menu above the cover, I would try to change the z-index. And play around with position: fixed.

              Hope that helps!

              Best!

              Marius

              www.mariusjopen.world

              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