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

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.

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.

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? 

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

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:

Hope this helps.

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

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

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

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?

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:

Let us know if you have more questions.