html - Wordpress 导航菜单项未正确显示
问题描述
我正在尝试将我的导航菜单移动到 wordpress,但遇到了一个问题,它的样式显示全部错误。在我将代码移动到 worpdress 后,标签会自动移动到代码的末尾,并将相同的样式应用于所有导航栏元素。也许有人在这里有解决方案或看到我的代码有什么问题?
这是我的菜单栏的 HTML 代码:
<div class="nav-links">
<?php
$menu_settings = [
'menu_class' => 'dropdown',
'container' => false,
'theme_location' => 'primary-navigation',
];
wp_nav_menu($menu_settings);
?>
<ul class="dropdown">
<li>Apie festivalį</li>
<ul>
<li><a href="#">Naujienos</a></li>
<li><a href="#">Apie festivalį</a></li>
<li><a href="#">Programa</a></li>
<li><a href="#">Partneriai</a></li>
<li><a href="#">Organizatoriai</a></li>
</ul>
</ul>
<ul class="dropdown">
<li>72 val. iššūkis</li>
<ul>
<li><a href="#">Apie iššūkį</a></li>
<li><a href="#">Taisyklės</a></li>
<li><a href="#">Komandos registracija</a></li>
<li><a href="#">Mentoriai ir komisija</a></li>
<li><a href="#">Apdovanojimai</a></li>
</ul>
</ul>
</div>
这是我将其移至 Wordpress 后的相同代码:
<div class="nav-links">
<ul id="menu-main-menu" class="dropdown">
<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-78"><a href="http://localhost/wp_odiseja/sample-page/">Apie festivali</a>
<ul class="sub-menu">
<li id="menu-item-464" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://localhost/wp_odiseja/about-festivals/">Apie festivalį</a></li>
<li id="menu-item-481" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-481"><a href="http://localhost/wp_odiseja/category/one-news/">Naujienos</a></li>
<li id="menu-item-657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-657"><a href="http://localhost/wp_odiseja/programa/">Programa</a></li>
<li id="menu-item-465" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-465"><a href="http://localhost/wp_odiseja/partners-page/">Partneriai</a></li>
<li id="menu-item-466" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-466"><a href="http://localhost/wp_odiseja/organizers-page/">Organizatoriai</a></li>
</ul>
</li>
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-84"><a href="http://localhost/wp_odiseja/sample-page/">72 val. iššūkis</a>
<ul class="sub-menu">
<li id="menu-item-467" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-467"><a href="http://localhost/wp_odiseja/about-challenge-page/">Apie iššūkį</a></li>
<li id="menu-item-538" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-538"><a href="http://localhost/wp_odiseja/rules-page/">Taisyklės</a></li>
<li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://localhost/wp_odiseja/mentors-page/">Mentoriai ir komisija</a></li>
<li id="menu-item-704" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-704"><a target="_blank" rel="noopener noreferrer" href="#">Komandos registracija</a></li>
<li id="menu-item-540" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-540"><a href="#">Apdovanojimai</a></li>
</ul>
</li>
</ul>
</div>
这也是我用于导航菜单的 CSS 代码:
// =========================
.nav-links{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 60%;
}
.dropdown{
width: 100%;
flex-direction: row;
justify-content: space-between;
display: flex;
}
.dropdown li {
display: flex;
border: 0;
font-size: 16px;
font-family: 'Bebas Neue', Bold;
text-transform: uppercase;
color:rgb(245, 240, 175);
width: 100%;
// img{
// width: 20px;
// height: 20px;
// padding-right: 0.42%;
// }
}
.dropdown ul{
border: none;
display: none;
position: absolute;
background: rgba(25, 105, 95, 0.8);
font-family: 'Bebas Neue', Bold;
text-transform: uppercase;
font-size: 17px;
padding: 1.56% 1.82%;
}
.dropdown ul a {
list-style: none;
border-bottom: none;
float: none;
color: rgb(245, 240, 175);
padding: 1.56% 1.82%;
text-decoration: none;
display: block;
text-align: left;
}
//Menu hover--------------------------------------------------------------
.nav-links:hover ul:hover li {
border: none;
border-bottom: 2px solid rgb(245, 240, 175);
}
.dropdown ul a:hover {
border-bottom: none;
background-color: rgb(25, 105, 95);
}
.dropdown:hover ul {
display: block;
width: 200px;
border-bottom: none;
}
.nav-links:hover ul:hover ul li{
border-bottom: none;
}
这是我的 PHP,我用来在 wordpress 上获取 HTMl 和 CSS:
<div class="nav-links">
<?php
$menu_settings = [
'menu_class' => 'dropdown',
'container' => false,
'theme_location' => 'primary-navigation',
// 'walker' => new custom_navwalker()
];
wp_nav_menu($menu_settings);
?>
</div>
非常感谢您的任何意见!
解决方案
Wordpress 主题通常已经为导航菜单设置样式,您还需要移动菜单的 CSS 样式代码并将其添加到主题的自定义 CSS 中以覆盖其外观。你有你的CSS代码吗?
推荐阅读
- python-3.x - 如何使用python从某些子目录中搜索某些文件
- python - 在 .gcode 文件中搜索以特定字母开头的字符串
- batch-file - 批处理脚本格式化
- python - 我在使用逻辑回归实现降雨预测分类模型时遇到错误
- selenium-webdriver - 在 chrome 扩展和自动化测试之间创建通信桥梁
- azure - 如何从 C# 应用程序访问 Power BI 管理 API
- python - 在 DataFrame 中求和行值
- python - 使用python中的数据框计算2个纬度和经度之间的距离
- r - 在 R 中查找具有最小峰宽的峰 - 类似于 MATLAB 函数
- aws-secrets-manager - lambda 如何在 aws secrets manager 中用于轮换 rds 凭证