Slidable Navigation Menu

[Pat_Bullock]

So after doing a lot of looking around, I am struggling to find a clean-cut way to create a slidable nav like the ones Google often uses (see Youtube and Google Maps examples attached).

I’m working on building a portfolio website currently, and ideally I would like to have a slidable nav like this to accompany the primary nav. The primary nav would list categories, and the slidable sub-nav would list individual project pages once a category section has been navigated to.

I’m a graphic designer, with a decent knowledge of html and css, but I start to get a little lost when it comes to JS. I decided to build this site under the impression that it would be a no-code experience with basic functionality available, like a slidable nav feature This is a really important part of my design though, and I am too deep in, so I am willing to figure out a custom code solution if it is relatively straightforward. Thanks in advance!!

[WebflowAIModerator]

Hi there,

To create a scrollable slider that shows multiple slides simultaneously, follow these customization steps:

The key is to adjust the individual slide widths using percentage values. For example, set each slide to 33.33% width to display three slides at once, or 25% for four slides. You can enhance the slider’s appearance by setting the background to transparent and customizing the navigation elements.

For a polished look, you can modify the slider settings by:

• Hiding the default navigation arrows if desired
• Adjusting the slide spacing using margin or padding
• Customizing the navigation dots with CSS
• Setting auto-advance timing if needed
• Adding custom transition effects

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.