问题描述
由于我的 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>