[Support request] Designing related query

Hi there,

can you share a link to your site where i can see this ?

Let’s deal with one question at a time.

In order to make the search box sticky, it has to be in its own container, so the 1st container needs to be splitted into 3 containers.
https://www.screencast.com/t/GQ7geHQb6

Hi Ajay,

You’ll need to take the 3 Container Blocks out of the Parent Container to make the Search Box sticky.

Once you’re done with this, let us know.

They’re still inside a parent container.

For clarity, can you share a screenshot of your structure as seen in the list view?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Great! Now, try adding this through Appearance > Customize > Additional CSS:

.gb-container.gb-container-58ea0e21.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10000;
}

The Search box in your reference site has a different structure. It’s likely custom coded or from a plugin.

With the WP Search Block, you can try adding this CSS:

.wp-block-search__inside-wrapper {
    background: linear-gradient(90deg, #FF596F, #E41421, #ED207B, #6551CC, #47CCCC, #99CCBB, #FF596F);
    padding: 1px;
}

This I believe is the closest you can achieve with the structure of the WP Search Block.

Add this CSS:

.wp-block-search .wp-block-search__button {
    margin-left: 0;
}
.wp-block-search input[type="search"] {
    background-color: #fff !important;
}