Answers No Results Banner - Make it Sticky

Search Best Practices - Search Front-End
1

Hey Team!

I am playing around with some CSS trying to make the “No results” banner on my experience “sticky” (stay at the top of the page when the user scrolls), but it doesn’t seem to be working.

So far what I have tried is this:

.yxt-AlternativeVerticals-noResultsInfo {
    position: -webkit-sticky;
    position: sticky; 
    top: 0; 
}

Anyone have any ideas why this isn’t working? Maybe I need to actually commit the change - right now I’m trying to create this in the inspect tool.

2

Hi Jessie - I was able to get this to work for a standard vertical page using the below CSS:

.yxt-Results-alternativeVerticals.component.yxt-Answers-component {
    position: sticky; 
    top: 128px; 
    z-index: 9999;
}

I only changed the target div, updated the top property so the banner stays in the results section below the search bar, and z-index to bring it to the front. Also, this will work on standard vertical pages but verticals with map have an entirely different layout, so further testing and adjustments will be needed there (if you are using vertical with map) but this hopefully gets you in the right direction.

I was trying to upload a gif but am having issues getting it to load, so here’s a URL to highlight the functionality: https://www.screencast.com/t/Cp6vl4SyOiSr

Feel free to circle back if you want some help with the map vertical.

Sam

3

You rock! Thank you Sam.

I’ll let you know if I have further questions.