Lay Theme Forum

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

    Fixing a text element in the foreground

    General Discussion
    2
    7
    145
    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.
    • P
      paulapetersen last edited by

      Hi Armin,

      how can I fix a text block/element in front of a moving (parallax) image grid in the background as seen on https://leberg.com/about?

      Best, Paula

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

        Dear Paula

        I hope i can help :)
        This website has a text box placed in the Gridder with a Custom Class that then has some Custom CSS Added to it making it sit fixed in the middle of the page.

        So within the Gridder a text box is added, then we right click and - Set HTML Class & ID:
        Screen Shot 2020-11-13 at 9.07.33 AM.png

        To follow your example i have given the element a class of '.fixedabout' :

        Screen Shot 2020-11-13 at 9.07.43 AM.png

        Then Within 'Lay - Options - Custom CSS & HTML':

        Screen Shot 2020-09-14 at 2.51.54 PM.png

        This Code has been used in the Example you provided:

        .fixedabout {
            position: fixed;
            top: 35%;
            left: 14.8%;
            transform: translate(-25%, -25%);
        }
        

        You can add this in the Custom CSS area at the top of the page, remember to save at the bottom :)

        Let me know how you go, this is the basics behind what your example has done to achieve the fixed text element in the foreground.

        Thank you for using Lay Theme and have a wonderful day!
        Best
        Richard

        P 1 Reply Last reply Reply Quote 0
        • P
          paulapetersen last edited by

          Dear Richard,

          many thanks for your detailed help! I'm new to all this CSS stuff but it's never too late to learn ;) I'll try by following your instructions and let you know how it's going.

          All the best and have a wonderful Friday!
          Best, Paula

          1 Reply Last reply Reply Quote 0
          • P
            paulapetersen @Richard last edited by

            @Richard-Keith

            Hi Richard, I followed your instructions but it's not working .. not sure what I'm doing wrong.

            http://paulapetersen.com/about

            Bildschirmfoto 2020-11-13 um 09.45.43.png Bildschirmfoto 2020-11-13 um 09.45.00.png

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

              Dear Paula

              Great to see your getting into the code :)

              You did everything right, It was actually my fault!
              I copy and pasted quickly the class name for this example, apologies.

              When naming the class in the Gridder leave out the ' . ' at the start of the name:

              .fixedabout should just be 'fixedabout'

              We use this ' . ' with CSS to target a class e.g a class called 'special' would in CSS be targeted with:

              .special{
              }
              

              With this ' . ' fullstop at the front - And for example if you had that ID that you called 'myid'

              You would target it in CSS with:

              #myid{
              }
              

              The ' # ' being a way to target 'ID's'

              Once again sorry for my error and goodluck!

              Best
              Richard

              1 Reply Last reply Reply Quote 0
              • P
                paulapetersen last edited by

                Dear Richard,

                many thanks, it is working now!! Yeah!! :-))

                Best, Paula

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

                  Dear Paula

                  Awesome! :)

                  Best wishes
                  Rich

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post

                  Try this to fix issues 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. Now see if your problem solved itself
                  5. 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

                  I
                  T
                  A
                  M
                  K
                  C
                  G

                  Recent Topics

                  • C

                    centred Carousel fixed width and proportions

                  • text underline

                  • open all links in a thumbnail grid in a new tab

                  • lazy loading affects project thumbnail mouseover images

                  laytheme.com