[Resolved] Hiding the heading title of a query block if empty

[qpaq]

Hi,

How can I hide the heading title of a query block placed on the left sidebar, if the output is empty?

And how can I make this block a sticky one so it stays the same place when scrolled up and down.

[Fernando]

Hi Qpaq,

Let’s address the first inquiry first regarding removing the title.

Add the Headline Block after the Query Loop Block inside the Container Block.

This will position the Headline after the Query Loop, but we will fix that with CSS.

Add this through Appearance > Customize > Additional CSS:

.gb-grid-wrapper.gb-grid-wrapper-450385a9.gb-query-loop-wrapper::empty + .gb-headline {
    display: none;
}

.gb-container.gb-container-3db058ea {
    display:flex;
    flex-direction:column-reverse;
}

[qpaq]

I think I’m making something wrong as it didn’t yield a result even when the query result is empty.

Screenshot

[David]

To hide the heading immediately after an empty query loop try this CSS:

.gb-query-loop-wrapper:empty + .gb-headline {
    display: none !important;
}

[qpaq]

Sorry, but that didn’t work out. Still seeing the heading even the query result is empty.

[David]

Where can i see the page with the empty query ?

[qpaq]

I’ve copied it to the private info box.

[Ying]

The headline is not after the query loop but before it, try this CSS instead:

.gb-container:has(.gb-query-loop-wrapper:empty) {
    display: none;
}

[qpaq]

Hi Ying,

That didn’t work out either. Am I doing something wrong?

[Ying]

You’ve added it into a media query, so it only works on mobile currently.

Try moving it out of the media query.

[qpaq]

Holy goat! Just saw the media query error. You’re a genius, now it works.

[Ying]

Haha glad to hear that 🙂

[Author]

Posts