css - 我该如何使我的导航栏响应

我的react应用程序navbar在移动视图上不成比例，我尝试了可能使它响应但不成功的样式。
这是我的应用在mobile view上的样子

这是desktop view

这是默认样式

的CSS

.main-nav {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.left-nav-menu {
  position: relative;
  float: left;
  top: 50%;
  transform: translateY(-50%);
}

.right-nav-menu {
  position: relative;
  float: right;
  top: 50%;
  transform: translateY(-50%);
}

最佳答案

关于导航栏在移动视图上可以容纳多少元素，要解决此问题，默认的方法是显示菜单而不是常规的选项卡列表。

这种用法的一个很好的例子。

How TO - Responsive Top Navigation。

PS：在浏览器开发工具中转到移动视图，以查看桌面视图和移动视图之间的示例差异。