FOLLOW UP: Here is the link to earlier question about floating timer. the conext for this is that the pages are really long so a floating timer/submit button would make it so the respondent doesn't have to scroll all the way up or down to see the timer or hit the submit/next page button.

---

Hi @rkchristensen, you should be able to override the styling of any of the elements on the survey but probably need to use the !important CSS rule in your overrides to ensure that your CSS 'has the final say'.



div#QIDXXXX {

position: fixed !important;

top: 0 !important;

right: 0 !important;

background: #000 !important;

}

---

If I were you I would add an additional floating button to the top but leave the buttons on the bottom.



You can do this with the `.clone()` method in jQuery. Add this JavaScript within `<script>` tags in the header



```javascript

Qualtrics.SurveyEngine.addOnReady(function() {

jQuery('#Buttons').clone().appendTo('#Header');

jQuery('#Header #Buttons #NextButton').click(function() {

jQuery('#SkinContent #Buttons #NextButton').click();

});

jQuery('#Header #Buttons #PreviousButton').click(function() {

jQuery('#SkinContent #Buttons #PreviousButton').click();

});

});

```



Then add some styling (to the Look and Feel > Advanced > Custom CSS):



```css

#SurveyEngineBody {

/* Don't want to cover the top of your survey with the button div */

padding-top: 50px;

}

#Header #Buttons {

top: 0;

position: fixed;

width: 100%;

left: 0;

right: 0;

background: #fff;

border-bottom: 1px solid #ddd;

margin-top: 0;

}

```



Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_dnz1a6CmIfXwzCB?Q_SurveyVersionID=current&Q_CHL=preview



QSF attached

---

mattyb513, thanks for your suggestions here. And for the working example. This solution doesn’t seem to work on any of the pages where we have the floating timing being implemented. The solution of putting a “cloned” submit button in the header works fine on all the other pages. I’m wondering if this is because the timer pages are using that submit button as a part of the timing logic (i.e., they’re tracking what how long someone is on the page before they submit the page).



In short, is it possible to have a submit button in the head AND a floating timer (as per link)?



Thanks!

Rob

---

mattyb513, thanks for your suggestions here. And for the working example. This solution doesn’t seem to work on any of the pages where we have the floating timing being implemented. The solution of putting a “cloned” submit button in the header works fine on all the other pages. I’m wondering if this is because the timer pages are using that submit button as a part of the timing logic (i.e., they’re tracking what how long someone is on the page before they submit the page).



In short is it possible to have both a floating submit button in the header AND a floating timer nlink]?(https://www.qualtrics.com/community/discussion/1400/how-to-get-a-timer-to-float-item-remain-in-position#latest "link")

---

What behavior are you seeing if they are both on the page?

---

The fixed submit header is not active on any page that uses timing.

---

Add this after the clone within the function



`jQuery('#Header #Buttons #NextButton, #Header #Buttons #PreviousButton').attr('disabled', false);`

---

Thanks. This gets me closer. I can now see the black space where my timer should be AND the submit button in the header. However, now I can't see the actual timer in that black box. Any ideas?



Before the submit header !



After the submit header !

---

So I'm trying to get a floating submit button and using an image that I want participants to be able to skip past.



When I have the timer on the page (without a page break) it messes up my floating header.



here's what it looks like:



Any tips on how to fix this?

!









> @mattyb513 said:

> If I were you I would add an additional floating button to the top but leave the buttons on the bottom.

>

> You can do this with the `.clone()` method in jQuery. Add this JavaScript within `<script>` tags in the header

>

> ```javascript

> Qualtrics.SurveyEngine.addOnReady(function() {

> jQuery('#Buttons').clone().appendTo('#Header');

> jQuery('#Header #Buttons #NextButton').click(function() {

> jQuery('#SkinContent #Buttons #NextButton').click();

> });

> jQuery('#Header #Buttons #PreviousButton').click(function() {

> jQuery('#SkinContent #Buttons #PreviousButton').click();

> });

> });

> ```

>

> Then add some styling (to the Look and Feel > Advanced > Custom CSS):

>

> ```css

> #SurveyEngineBody {

> /* Don't want to cover the top of your survey with the button div */

> padding-top: 50px;

> }

> #Header #Buttons {

> top: 0;

> position: fixed;

> width: 100%;

> left: 0;

> right: 0;

> background: #fff;

> border-bottom: 1px solid #ddd;

> margin-top: 0;

> }

> ```

>

> Working Example: https://qualtricssfi.az1.qualtrics.com/jfe/preview/SV_dnz1a6CmIfXwzCB?Q_SurveyVersionID=current&Q_CHL=preview

>

> QSF attached

---

I tried to add the submit button to the top of my survey as advised by adding the code provided with script tags -<script></script> and the CSS code but it does not work for me. I am not a developer to any degree so I am following your steps as is. Is there something else that I need to do?

---