Can we make a section like AirBnb's top row

Hello all,

When we open AirBnb on a mobile device, the top 3 buttons (Homes, Experiences, Restaurants) show up as a section where we can scroll (slide) from left to right.

Please tell me how to create such a section using the X Theme.

Thank you!

Hi there,

Thanks for writing around! You can use Feature Box element to create a similar layout, you can check out the demo here https://theme.co/cornerstone/elements/#x-section-6

If you need to add a link to your feature box, this link would be helpful https://theme.co/apex/forum/t/code-snippet-add-a-link-to-feature-boxes/273

Hope this helps!

@Nabeel thank you but that doesn’t work. As shown in the included image, on a mobile device, that page shows these features in a long column. I want this section to “not respond”, rather to show horizontal (swipe based) scrolling for diamonds, bicycles, envelopes… Hope this clarifies.

Thank you for trying to help out. .
Agam

Hi Agam,

Can you provide us your site url. This is to ensure that we can provide you with a tailored answer to your situation.

For the mean time, you can try adding the code below in your section’s element css (Section > Customize > lement CSS)

@media(max-width:767px) {
$el {
    max-width:450px;
    overflow-x:scroll;
}
}

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.