哪个 CSS 可以用移动响应视图上的较长文本替换主菜单的文本1 个符号？

如何解决哪个 CSS 可以用移动响应视图上的较长文本替换主菜单的文本1 个符号？

由于我的 WP 主题 Listingpro 的菜单中缺少“仪表板”链接，仅在响应式视图中。 Dashboard 的链接已经存在并且在桌面视图中运行良好。

我想添加一个文本符号，这个符号可以是： ◊ ，在主（主页，顶部栏，移动）菜单的右侧。这个符号链接到仪表板，可以让学生（已经登录的用户）访问他们的列表仪表板。因此，他们可以通过移动设备进行访问和编辑。

如果还没有登录，并且有人点击仪表板链接，它已经进入主页。

Lisitngpro 已经创建了一个应用视图，解决了这个问题，仪表板链接运行良好，但由于搜索栏上的一些自定义，我无法使用这个应用视图。所以我需要一个解决方案。

所以我在右侧的顶部菜单中添加了符号 ◊，在登录按钮旁边。它在桌面上看起来像这样：

日程|培训 |联系我们 | ◊ |登录

和响应式视图一样：

登录时间表训练联系我们 ◊

-> 1) 自定义 CSS 代码可以替换这个符号（在我的整个网站中都没有使用），仅在移动响应上，用一个句子“学生仪表板”。所以它在响应式视图中可能看起来像这样：

登录时间表训练联系我们学生信息中心

-> 2) 理想情况下，它可以使替换文本仅在登录后出现。

-> 3) 理想情况下，它还可以使替换文本永远不会出现在桌面视图中，因为该链接已经存在于桌面视图中。但是 1) 的成功已经很棒了！！！

有人可以帮我做一个 CSS，任何线索?？

谢谢，西尔万

解决方法

使用媒体查询来控制某些元素前后的内容。下面的示例使用了非常通用的选择器，请根据您自己的网站进行调整。（如果这不是您要找的内容，请随时在评论中告诉我。）

/* This uses global rules. Adapt for
your own site! */

#menubar {
  position:sticky;
  position:-webkit-sticky;
  top:0;
  margin:0px;
  left:10;
  background-color:white;
}
ul {
  list-style: none;
}
* {
  margin:0px;
}
body {
  margin:0px;
}
li {
  border:1px solid black;
  background-color:cyan;
}
@media only screen and (max-width: 600px) {
  li {
    display:block;
  }
  #home::before {
    position:fixed;
    left:0;
    content:"◊";
  }
}
@media only screen and (min-width: 601px) {
  li {
    display:inline;
  }
}

<div id="menubar">
  <ul>
    <li id="home">HOME</li>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Duis blandit sollicitudin urna,et tempus purus sollicitudin non. Fusce blandit neque venenatis mauris varius consequat. Nam fermentum mi vel accumsan ultrices.</p>
<p>Lorem ipsum dolor sit amet,et tempus purus sollicitudin non. Fusce blandit neque venenatis mauris varius consequat. Nam fermentum mi vel accumsan ultrices.</p>