Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Brite
  • 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. Bug Reports
  3. Split Screen Website + overlay interfering with each other

Split Screen Website + overlay interfering with each other

Scheduled Pinned Locked Moved Bug Reports
split screenoverlayhelp
4 Posts 2 Posters 738 Views 2 Watching
  • 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.
  • A
    A
    axelpihl
    wrote on last edited by axelpihl
    #1

    Hi, i'm using split-screen on certain pages on my website and they work great untill i make an element have an overlay link. When i make a button or text have a link to an overlay page the page is allways open on that specific page. For example, i have a page called .page-id-399 which has split screen. On this page i also want a menu to open when pressing a button (an overlay page) - but when i make this button have a overlay link the page 399 has the overlay open at all times and i am unable to close it. Is there a solution to this?

    Here's my code for that page.

    .page-id-399 .lay-content #grid,
    .page-id-399 #footer-region {
        height: 100%;
        position: fixed;
        top: 0;
        overflow-y: scroll;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    
    .page-id-399 #footer-region {
        left: 0;
        width: 10%;
    }
    
    .page-id-399 #footer {
        box-sizing: border-box;
        min-height: 100%;
    }
    
    .page-id-399 .lay-content #grid {
        right: 0;
        width: 90%;
        box-sizing: border-box;
    }
    
    .page-id-399 ::-webkit-scrollbar {
        display: none;
    }
    #footer-region {
            border-right: 1px solid #ccc;
    }
    

    Thank you in advance,
    Axel

    1 Reply Last reply
    0
    • arminunruhA
      arminunruhA
      arminunruh
      Global Moderator
      wrote on last edited by arminunruh
      #2

      hey axel

      after i released the overlay feature i had to change the example code for the splitscreen layout:

      https://laytheme.com/tutorials/create-a-splitscreen-website.html

      so you need to make sure that you use

      body>.lay-content
      

      instead of .lay-content

      so your code should be:

      body.page-id-399 > .lay-content #grid {
          right: 0;
          width: 90%;
          box-sizing: border-box;
      }
      

      the > sign means direct child of the previous selector
      this makes sure only the .lay-content div of your page, not of any overlays is styled

      the #footer-region css, you can keep it like this because overlays don't contain footers

      A 1 Reply Last reply
      0
      • arminunruhA arminunruh

        hey axel

        after i released the overlay feature i had to change the example code for the splitscreen layout:

        https://laytheme.com/tutorials/create-a-splitscreen-website.html

        so you need to make sure that you use

        body>.lay-content
        

        instead of .lay-content

        so your code should be:

        body.page-id-399 > .lay-content #grid {
            right: 0;
            width: 90%;
            box-sizing: border-box;
        }
        

        the > sign means direct child of the previous selector
        this makes sure only the .lay-content div of your page, not of any overlays is styled

        the #footer-region css, you can keep it like this because overlays don't contain footers

        A
        A
        axelpihl
        wrote on last edited by
        #3

        @arminunruh

        Thank you very much and thanks for the fantastic theme. It's very nice to work with.
        Have a nice sunday!
        Axel

        1 Reply Last reply
        1
        • arminunruhA
          arminunruhA
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          aha thanks a lot!! u too

          1 Reply Last reply
          0

          Hello! It looks like you're interested in this conversation, but you don't have an account yet.

          Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

          With your input, this post could be even better 💗

          Register Login
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          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