Progress bar position

Question

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

Tom_1842 · Accepted Answer

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.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:--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

Tom_1842 · Answer

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.Qualtrics.SurveyEngine.addOnReady(function() {  jQuery('#ProgressBar').clone().appendTo('#Header');});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:Qualtrics.SurveyEngine.addOnReady(function() {  jQuery('#ProgressBar').detach().appendTo('#Header');});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:#ProgressBar {display: none !important;}

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded