[Support request] Navigation as header merge with first row query loop

[Shuhui]

Hi there,

I’m building a website where all pages have merged content to the navigation. I managed to make it work everywhere EXCEPT on the “news” page where the first row is a generateblock query loop to show the latest post as a highlight banner. On that page, the navigation merge with well but the row isn’t full width unlike other pages. So the background image is contained and therefore the navigation menu doesn’t appear complete. I’m guessing there is some kind of parameters of the query loop block that prevent it to make a full width banner, but I’m not sure what to change here. I would appreciate your insight on this.

Hope you can help me out!

Cheers

[Fernando]

Hi Clemence,

Can you try placing this Query Loop inside a GB Container Block, and set this Container to full width through the toolbar? Example: https://share.getcloudapp.com/BluRjW09

[Shuhui]

Hi Fernando, just did, no change. I also set the inner container of the container to full width but it doesn’t help.

[Fernando]

I see. Try giving the Grid Block under the Query Loop Block a class of cu-new-query through the Advanced section in its Block settings. Then, add this CSS through Appearance > Customize > Additional CSS:

.gb-grid-wrapper.cu-new-query > .gb-query-loop-item {
    width: 100%;
}

Let us know how it goes.

[Shuhui]

Yayy works!

Thanks a lot 🙂

Should I remove the Container Block that I added or it should be left as is?

[David]

Hi there,

keep the Container Block 🙂

[Author]

Posts