如何在已创建的sidenav旁添加topnav（仿Twitter界面）

你遇到的两个核心问题：

• topnav仅显示灰色栏无按钮：缺少topnav的具体链接HTML结构
• sidenav覆盖topnav：sidenav为固定定位且宽度550px，topnav默认全屏布局且未设置合理的定位规则

以下是具体修改方案：

1. 补全topnav的HTML结构 #

在sidenav的div之后添加topnav的完整代码，包含你需要的按钮：

<div class="topnav">
  <a href="#you" class="active">you</a>
  <a href="#following">following</a>
  <a href="#discover">discover</a>
  <div class="topnav-right">
    <a href="#profile">profile</a>
  </div>
</div>

2. 修改CSS解决布局冲突 #

调整topnav的定位规则，让它固定在sidenav右侧，同时适配页面整体布局：

/* 调整topnav定位，使其在sidenav右侧显示 */
.topnav {
  background-color: #181818; /* 和sidenav背景统一，匹配深色主题 */
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 550px; /* 与sidenav宽度一致，确保从右侧开始 */
  width: calc(100% - 550px); /* 占据剩余屏幕宽度 */
  z-index: 1; /* 与sidenav同层级，避免被覆盖 */
}

/* 调整main区域的margin，避免被sidenav和topnav遮挡 */
.main {
  margin-left: 550px; /* 对应sidenav宽度 */
  margin-top: 50px; /* 留出topnav的高度空间 */
  font-size: 28px; 
  padding: 0px 10px;
}

/* 适配深色主题的topnav交互样式 */
.topnav a:hover {
  background-color: #212121;
  color: #2EFFA8;
}

.topnav a.active {
  background-color: #2EFFA8;
  color: #212121;
}

/* 把profile按钮放到右侧 */
.topnav-right {
  float: right;
}

3. 完整代码示例 #

HTML部分 #

<div class="sidenav">
  <img src="./img/Aero Textual Icon Green.png" class="icon-sidenav" alt="Aero Icon Top Sidenav" style="cursor:default">

  <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">home</span>Timeline</a>
  <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">notifications</span>Notifications</a>
  <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">near_me</span>Explore</a>
  <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">bookmark</span>Saved</a>
  <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">sms</span>Messages</a>
  <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">person</span>Profile</a>
  <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">settings</span>Settings</a>
  <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">more_horiz</span>More</a>

  <a href="#"><button>Post</button></a>
</div>

<div class="topnav">
  <a href="#you" class="active">you</a>
  <a href="#following">following</a>
  <a href="#discover">discover</a>
  <div class="topnav-right">
    <a href="#profile">profile</a>
  </div>
</div>

<div class="main">
  <!-- 主内容区域 -->
</div>

CSS部分 #

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' -25,
  'opsz' 48
}

.material-symbols-rounded-high {
  font-variation-settings:
  'FILL' 0,
  'wght' 700,
  'GRAD' 0,
  'opsz' 48
}

body {
  font-family: 'Coda', cursive;
  background-color: #212121;
  color: #fff;
}

.main {
  margin-left: 550px;
  margin-top: 50px;
  font-size: 28px; 
  padding: 0px 10px;
}

.sidenav button {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 23px;
  margin-top: 25px;
  margin-left: 163px;
  border-radius: 50px;
  width: 230px;
  height: 55px;
  background-color: #2EFFA8;
  text-align: center;
  color: #212121;
  border: none;
  text-decoration: none;
}

.sidenav button:hover {
  background-color: #27d88e;
}

.icon-sidenav {
  padding-top: 30px;
  padding-bottom: 35px;
  width: 170px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.inline-icon {
  vertical-align: bottom;
  font-size: 32px !important;
  padding-right: 15px;
}

.sidenav {
  height: 100%;
  width: 550px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #181818;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a.sidebarbtn {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 200px;
  text-decoration: none;
  font-size: 22px;
  color: #ffffff;
  display: block;
}

.sidenav a:hover {
  color: #2EFFA8;
  cursor: pointer;
}

.sidenav a:active {
  color: #2EFFA8;
}

.topnav {
  background-color: #181818;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 550px;
  width: calc(100% - 550px);
  z-index: 1;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #212121;
  color: #2EFFA8;
}

.topnav a.active {
  background-color: #2EFFA8;
  color: #212121;
}

.topnav-right {
  float: right;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

内容的提问来源于stack exchange，提问作者katniss