Css 如何创建自定义导航栏（WordPress）

我需要创建一个自定义导航栏来替换WordPress站点上现有的导航栏。我有不错的CSS，但从来没有遇到过这样的事情

我找到了多种方法来删除现有的导航栏，因此这不是一个问题，但是添加带有与svg相关链接的svg是一个问题

导航栏应该是这样的

---

我想你可以从两个不同的角度来看待这个问题

1-您不想/不能使用PHP

您可以通过Wordpress的管理面板创建自定义菜单

向按钮添加特定类（通过使用页面右上角的“屏幕选项”面板激活菜单按钮上的CSS类属性字段）

那么您需要两个类：

• 第一行链接的一个类（who/what/how）
• 第二行链接的另一个类（联系人）

并调整反CSS规则以显示所需的链接

最后，我将显示“cloud”svg作为整个菜单的背景

真正的问题是wordpress将在

ul

中以

li

的形式输出所有菜单项，因此您可能应该创建两个不同的菜单（每行一个），并在专用容器中显示这两个菜单

---

2-您想要/可以/更喜欢使用PHP

这个替代方案利用Wordpress，创建一个自定义的walker扩展它

其思想是，通过定制这个PHP类，您可以通过定义HTML输出来指定wordpress呈现菜单的方式

这里有一些链接可以帮助您做到这一点：

自定义菜单输出正常后，只需通过CSS自定义生成的HTML

---

---

注意：如果您对PHP不够熟悉，那么第二种方法可能是一种冒险

欢迎使用堆栈溢出！为了给你一个很好的答案，如果你还没有看一眼，它可能会帮助我们。如果你能提供一个简单的例子，它可能也很有用。到目前为止你都做了些什么？你知道有一个专门为你服务的Stack Exchange站点吗？如果你查看它的@RobertLongson，你可能会发现你的问题在那里效果更好，我不知道它的存在。谢谢你，伙计！