在响应式网站的设计中，移动设备的导航栏设计非常重要，因为移动设备的屏幕空间有限，所以导航栏的展示方式也要考虑到这一点。其中一种常见的设计是滚动式导航栏，当导航栏的选项超出屏幕宽度时，可以通过滑动来查看更多选项。

要实现这种滚动式导航栏的效果，我们可以使用CSS中的flex布局，通过设置容器的overflow属性为scroll，来控制导航栏的滚动。

.nav {display: flex;  /*使用flex布局*/overflow-x: scroll;  /*设置水平滚动*/}.nav-item {flex-shrink: 0;  /*防止项目缩小*/white-space: nowrap;  /*防止文本换行*/padding: 0 10px;  /*设置左右边距*/}

在上面的示例中，我们创建了一个.nav容器，并将display属性设置为flex。然后，我们设置overflow-x属性为scroll，以启用水平滚动。接着，我们将.nav-item项目设置为flex-shrink:0，以防止它们缩小，然后使用white-space属性设置为nowrap，以防止文本换行，并设置左右边距以提高可读性。

除此之外，我们还可以使用JavaScript来进一步完善这个滚动式导航栏，比如在滚动时隐藏导航栏顶部的logo和搜索框，以腾出更多的空间。在使用JavaScript的时候，我们可以监听容器的scroll事件，并结合CSS的过渡效果，实现更流畅的交互。

总的来说，滚动式导航栏是一种非常实用的设计方式，它可以帮助我们更好地适应移动端设备，提升用户体验。