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. Back to Top Button sticky

Back to Top Button sticky

Scheduled Pinned Locked Moved General Discussion
buttonfixedback to top
9 Posts 3 Posters 1.4k 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.
  • J Offline
    J Offline
    Jan
    wrote on last edited by Jan
    #1

    Hi,
    I try to create on my site a "back to top button" which is sticky/ fixed when scrolling down.
    It´s not a big deal to make a back to top button, but I don´t manage to make it fixe.
    Is there anybody who could help out.

    Thanks a lot in advance.
    Jan*

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      HI Jan,

      in the gridder you create an element with an image or a text. This element you give a class fixed-element.

      In the Custom CSS you do something like this:

      .fixed-element {
      position: fixed;
      top: 100px;
      left: 100px;
      }
      

      Play with it.
      I hope that works for you.

      Best!

      Marius

      www.mariusjopen.world

      J 1 Reply Last reply
      0
      • mariusjopenM mariusjopen

        HI Jan,

        in the gridder you create an element with an image or a text. This element you give a class fixed-element.

        In the Custom CSS you do something like this:

        .fixed-element {
        position: fixed;
        top: 100px;
        left: 100px;
        }
        

        Play with it.
        I hope that works for you.

        Best!

        Marius

        J Offline
        J Offline
        Jan
        wrote on last edited by Jan
        #3

        @mariusjopen said in Back to Top Button sticky:

        fixed-element

        Hi Marius,

        thanks a lot. It works. The only issue now is that the element is laying underneath the images.
        How do I get it laying above?
        And once more :) - Is there a way to place the Button fixed on the right side of the browser window,
        always on the bottom of the page.

        Basically I want to create a back to top buttom sticking on the lower right corner of the browser window --- just a arrow which brings you up again.

        Thanks
        Jan*

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

          Hi @Jan
          Have a look here:

          .fixed-element {
          position: fixed;
          top: 100px;
          left: 100px;
          
          z-index: 1000;
          }
          

          To do the hover thing you might try this. I did not test it though:

          .fixed-element {
          position: fixed;
          top: 100px;
          left: 100px;
          
          z-index: 1000;
          opacity: 0;
          }
          
          .fixed-element:hover {
          opacity: 1;
          }
          

          I hope I could help!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • U Offline
            U Offline
            ute
            wrote on last edited by
            #5

            hi,
            i want to insert a "back" button to a fullscreen slider, which will lead back to a specific URL. I just added text to each slider in the gridder of the fullscreen slider. But the button is not fixed. How do i do this?

            Best
            Stella

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Hi @ute
              can you post a link to your website?
              Then I can help better :-)

              Many wishes!

              Marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              • U Offline
                U Offline
                ute
                wrote on last edited by
                #7

                @mariusjopen

                Sure thing:)

                http://richterstella.com/001in-space-2018fullscreen-slider

                1 Reply Last reply
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  HI @ute

                  ok. I see your problem.

                  The button moves – even it's position is fixed.

                  I think the only way to go here is to place the button outside if the Gridder with the Custom HTML.

                  Is that an option for you?

                  All the best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply
                  0
                  • U Offline
                    U Offline
                    ute
                    wrote on last edited by
                    #9

                    hej Marius,

                    can you tell me how to do that?

                    Thanks :)

                    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