How to move logo left slightly and have it stay at top of screen when scrolling

  • Profile Image
    blair.jackson
    Asked on September 04, 2019 at 06:14 PM

    Hi, I wish to move my logo slightly more left so that the last letter doesn't merge into the form. I'm sure there is some simple CSS code but I can't figure it out.


    I also would like for the logo to get to the top of the screen and stop scrolling if possible. I like that it floats over the background but I just want it to always be visible.

    Thanks in advance.

    Screenshot
  • Profile Image
    denis_calin
    Answered on September 04, 2019 at 06:35 PM

    Hi Blair!

    In order to move the logo to the left and make it float as you scroll down the page, please add the following CSS to your form:

    .form-all::before {
      position: fixed !important;
      left: 270px !important;
      top: 50px !important;
    }

    You can adjust the values for left: and top: slightly if you would like to move your logo around. Here is the guide on how to add CSS code to your form: How-to-Inject-Custom-CSS-Codes.

  • Profile Image
    blair.jackson
    Answered on September 04, 2019 at 07:02 PM

    Thanks Dennis. This will most definitely do the job and I'm happy with the result. However not quite what I was looking for and maybe what I'm think of is not possible.

    Is there any way I can have the logo scroll up with the form until it gets a certain distance from the top of the screen and then remain static at the top? 

  • Profile Image
    David
    Answered on September 04, 2019 at 08:02 PM

    Is this what you would like? https://form.jotform.com/92467514141960

    1567641593background.gif

    Not sure if that is the your ideal, but if it is, simply inject this code:

    .form-all {

        background: transparent !important;

    }

    .form-all:before {

        top: 0 !important;

        position: sticky !important;

        z-index: 2 !important;

    }

    Then, make sure to set the font color to white:

    1567641722fontcolor.gif

    Hope this helps.

  • Profile Image
    blair.jackson
    Answered on September 04, 2019 at 09:34 PM

    This is exactly how I wanted it to behave, however aligned over to the left so that I don't need to change the colour of the form or text.

    Essentially combine to the two answers that have been provided. Aligned off to the left but with the sticky scroll

  • Profile Image
    David
    Answered on September 04, 2019 at 10:10 PM

    Please check this version: https://www.jotform.co/form/92468509330864

    The form is there already in your account. Hope this helps.

  • Profile Image
    blair.jackson
    Answered on September 04, 2019 at 10:48 PM

    Sorry to keep bothering you but we are so close to what I'm after. I have now put your code in minus the transparent background part (I prefer it on a white background).

    Are we able to get rid of that massive white space that has now appeared above my headers?

  • Profile Image
    David
    Answered on September 04, 2019 at 11:05 PM

    It is a pleasure to assist you. Please try injecting this CSS code to reduce the white space above the headers:

    .form-section,.page-section{

        margin-top: -15%;

    }

    Result:

    1567652687result.png

    Let us know if you have more questions.