Hi - I'm using the "Simple" layout in CoreXM. In the Look/Feel section under Logo, I've uploaded an image and set the Style to Banner. This works great on most of the survey, but whenever there's a question that is long (more than you can view at a glance), Qualtrics jumps to the top of the question and pushes my banner off the page (you have to scroll up to see the banner).
I've experimented with using a header image instead, but my banner continues getting pushed off the page on longer questions. Any ideas?
Many thanks!
Probably this could be due to some CSS code used for styles.
Can you try changing the styles of the banner, adjust minimum height and z-index
Thank you Vinoth_Mathaiyan ! Maybe it's my lack of skill, but today I've tried numerous CSS and settings adjustments, but without success. I thought I might have success using the Header functionality (Look and feel, General, Header) instead of the Logo banner approach, but even with this change, I can't get my header to stay at the top of the page. It always pushes it out of view and puts the user at the top of the question (on pages where the questions are longer).
If possible, could you please share the preview link, it will be helpful to understand better?
Hi there, I tackled a similar post recently and adding the below CSS to the Style section of the survey's Look & Feel worked to fix the Logo to the top of the screen:
.Skin #Questions {
padding-top: 80px;
}
#LogoContainer {
top: 0;
position: fixed;
width: 100%;
left: 0;
right: 0;
background: #fff !important;
background-color: #fff;
border-bottom: 1px solid #ddd;
margin-top: 0;
z-index: 999;
}
You might need to adjust the padding-top a bit depending on the size of your image.
Actually, the above will not work for Simple layout because it uses different ids for the logo container and the question content. Try using the below instead:
#survey-canvas {
padding-top: 140px;
}
#logo-container {
top: 0;
position: fixed;
width: 100%;
left: 0;
right: 0;
background: #fff !important;
background-color: #fff;
border-bottom: 1px solid #ddd;
margin-top: 0;
z-index: 999;
}
Thank you @tom_1842 ! Your code was good at fixing the logo container to the top (in the Simple layout). The issues it created, however are: 1) my top progress bar is no longer visible (though I should be able to fix by adjusting padding), and 2) on longer questions, the text now slides up under my logo container (see video demonstration: https://cfnc.wistia.com/medias/6jem8e85wb).
I've tried a number of CSS adjustments, and found that whenever I fix one thing, I cause problems with another.
Have a great day.
markcarolina thank you for the video. For your 1st point, you can also try positioning the progress bar at the bottom of the screen. For the 2nd, I was able to reproduce on my end where Simple layout causes pages to autoscroll down a bit so that the questions are at the top of the screen. This puts the text behind the stickied logo container. I was not able to turn this autoscrolling off.
To get around this, you can add some line breaks to the Question Text at the top of each page so that the text still displays when the autoscrolling happens.
If you can, I think I would recommend switching to a different layout and using the code I first posted.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.