How can i create a trending bar?

Hi there,

use a Block element:

https://docs.generatepress.com/article/block-element-overview/

Add whatever content you want to display. we recommend using the GenerateBlocks plugin for ease of design.
And then select the Hook eg. before_header which will position it in a similar place to the one in your example URL.

Then set the Display Rules Location to where you want it to appear. eg. Entire Site

Can you clarify please, how can I add inline list items with proper margin and padding? Also, I want to add an inner.
You can check this trending bar: https://www.tomshardware.com/best-picks/best-pc-builds-gaming
screenshot: https://prnt.sc/k-seQSJSqeUE

Note: I am begainer. not an expart.

Build it using the GenerateBlocks plugin:

https://generateblocks.com

First add a Container Block:

https://docs.generateblocks.com/article/container-overview/

With the Container you can add background and spacing.

Inside that Container you can add GB Headline Blocks for each of the links. In the Spacing settings of the Headline you will see the Inline Width option:

https://docs.generateblocks.com/article/headline-overview/#spacing

By enabling that will keep them inline.

Thanks for everything. It works perfectly.
But, one issue. How to make it mobile-friendly?
Please check it using a mobile device: https://www.tomshardware.com/best-picks/best-pc-builds-gaming

Tricky that .... can you share a link to your site where i can see your bar ?

Here it is: https://www.

Hi Md,

From my end, here is what your Trending bar looks like on mobile: https://share.getcloudapp.com/4guKmRKE

It seems that you were able to make it similar to the one in your reference website already. Can you confirm if you’ll still need further assistance with regards to this?

Or perhaps you’re referring to a different link?

Kindly let us know. :)

It's not my website.
My website is: https://www. (Currently Trending bar hidden on mobile for this issue.)
still i need help.

I see. Thank you for providing the link to the site in question.

If that’s the case, you can place you Trending items inside a Container and add a class as such: https://share.getcloudapp.com/8LuDJl1o

Then, make it scrollable through a code like this:

.gb-container.make-scrollable .gb-inside-container {
    display:flex;
    overflow-x:scroll;
}

.gb-container.make-scrollable .gb-inside-container .gb-headline{
    white-space:nowrap;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

Testing, here is what it would look like with your current structure: https://share.getcloudapp.com/RBundkrm

Hope this helps! :)

Works. But creating an issue on the Desktop browser. Creates an extra bar below.
Screenshot: https://prnt.sc/y6I7oEjNW5Tc

2nd issue, don't want to make scrollable inner text "TRENDING". explains on the screenshot: https://prnt.sc/y6I7oEjNW5Tc

3rd issue. I create this section using the div tag. is it possible to create this section using < ul >< li > tag. (I want to make it list item)

Lets get #3 out the way: No its not possible to make it a <ul><li>

1. Scrollbars we can look at after #2

2. you will need to change the layout and use a Grid Block inside the main container.
The Grid Block should be 2 x Column.
Column 1 contains the TRENDING headline.
Column 2 contains the rest of the headlines and it should have the make-scrollable CSS Class. Make sure to remove that class from its current container.

Done.
1. It brakes the row on mobile browser.
2. Creates issue on Desktop browser.

Hi Md,

Can you kindly apply it again? At the moment, we’re still seeing the previous state.

Specifically, insert all the trending items (excluding the Block "Trending" itself") inside a new container and add the custom class: make-scrollable.

Then we’ll see what CSS is needed to fix the issues.

Hope to hear from you soon. :)

Check the screenshot: https://prnt.sc/U6pFdJCDk2FA
I captured it from an incognito browser.