Progress bar position | XM Community
Skip to main content

Hello everyone!!
I would like to change the progress bar position so that it appears after header. Also, how can we remove the progress bar from the 'end of the survey' page

Hi there, within your survey's Look & Feel, you can designate the Progress Bar to be positioned at the top of your survey. I think that's probably the cleanest option, but below are some bits of codes for you to consider.
Within the survey's Look & Feel, set the Progress Bar to the Bottom of your survey. Then, to have the progress bar display in the Top as well as the Bottom of your survey, place the below code in the Header of your survey's Look & Feel.

If you want to have this version of the Progress Bar display only on the Top of your survey, place the below code in the Header of your survey's Look & Feel:

To hide the Progress Bar for your End of Survey message, create a Custom End of Survey Message and include the below HTML in the source view of the text:


@Tom_1842 I can not see the code may be it is vey old post. How can we move progress bar below the header.


Hi ​@PeeyushBansal! Original comment is below:

--

Hi there, within your survey's Look & Feel, you can designate the Progress Bar to be positioned at the top of your survey. I think that's probably the cleanest option, but below are some bits of codes for you to consider.

Within the survey's Look & Feel, set the Progress Bar to the Bottom of your survey. Then, to have the progress bar display in the Top as well as the Bottom of your survey, place the below code in the Header of your survey's Look & Feel.

<script>
Qualtrics.SurveyEngine.addOnReady(function() {
    jQuery('#ProgressBar').clone().appendTo('#Header');
});
</script>

If you want to have this version of the Progress Bar display only on the Top of your survey, place the below code in the Header of your survey's Look & Feel:

<script>
Qualtrics.SurveyEngine.addOnReady(function() {
  jQuery('#ProgressBar').detach().appendTo('#Header');
});
</script>

To hide the Progress Bar for your End of Survey message, create a Custom End of Survey Message and include the below HTML in the source view of the text:

<style>
#ProgressBar {
display: none !important;
}
</style>

--

To move the Progress Bar below the Header, I might recommend going with the 2nd piece of code but appending it to the HeaderContainer instead. Try using the below:

Header of the survey
<script>
Qualtrics.SurveyEngine.addOnReady(function() {
  jQuery('#ProgressBar').detach().appendTo('#HeaderContainer');
});
</script>

 


@Tom_1842 This works. THANK YOU!!


Leave a Reply