如何修复此导航菜单 - 它不会显示
Posted
技术标签:
【中文标题】如何修复此导航菜单 - 它不会显示【英文标题】：How to fix this navigation menu - It wont show up 【发布时间】：2019-11-28 03:44:28 【问题描述】：您可以在http://prodenvermovers.wpupkeep.org查看网页
在我将鼠标悬停在服务页面上后，它不会显示下拉菜单。 下拉菜单是通过 wp_nav_menu 在 wordpress 中制作的。我有 5 页，其中之一是带有 3 页下拉菜单的服务页面。我也在使用 wp_bootstrap_navwalker
我尝试了很多东西。首先我更改了 wp_bootstrap_navwalker 中的一些数据
$atts['href'] = 'http://prodenvermovers.wpupkeep.org/services/';
$atts['data-hover'] = 'dropdown';
我从 boostrap responsive 中删除了 absolute 类，它出现了，但是像这样 查看图片 --> http://prntscr.com/oh5lzk 正如您在这张图片上看到的，它通过下拉菜单推送了我的徽标和免费估价。
header.php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package crosscountry
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<script>
(function(i,s,o,g,r,a,m)i['GoogleAnalyticsObject']=r;i[r]=i[r]||function()
(i[r].q=i[r].q||[]).push(arguments),i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
)(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76356877-1', 'auto');
ga('send', 'pageview');
</script>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'crosscountry' ); ?></a>
<!-- header parts -->
<header id="masterhead" class="site-header">
<div class="md-wrapper">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="country-logo" href="<?php echo site_url() ?>">
<img class="country-logo-style" src="<?php echo get_bloginfo("template_directory"); ?>/images/header/logo_pdm.png" ></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-md-12 col-lg-7 padding-nav-left">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
wp_nav_menu( array(
'menu' => 'header_menu_1 ',
'depth' => 3,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</div>
<div class="col-md-3 md-header-cta-class">
<a class="md-header-estimate" href="<?php echo site_url('free-estimate') ?>">Free Estimate</a>
</div>
</nav>
</div>
</div>
</div>
</header>
<div id="content" class="site-content">
md-header.css
background: transparent;
float: left;
width: 100%;
z-index: 2;
overflow: hidden;
border-bottom: 1px solid rgb(194, 194, 194);
header#masterhead .container
background: transparent;
.site-title,
.site-description
display: none;
.country-logo
margin: 0;
.country-logo-style
width: 193px;
height: 60px;
.menu-navigation
margin-top: 5px;
/* STYLING UL ELEMENTS */
.navbar
padding: 0 !important;
.navbar-nav
color: #333333;
margin-left: 100px;
text-transform: uppercase;
margin: 0;
.nav-item
padding-left: 0px;
padding-right: 0px;
font-weight: 600;
.site-header
overflow: hidden;
a.nav-link
padding-bottom: 25px !important;
padding-top: 25px !important;
border-bottom: 4px solid transparent;
width: 100px;
font-size: 16px;
color: #fff !important;
transition: all 0.5s ease-in;
.site-header .nav-link:hover
border-bottom: 4px solid #ecf014 ;
color: rgb(235, 235, 235) !important;
@media screen and (max-width: 1255px)
.nav-item
padding-left: 10px;
.nav .navbar-nav li a
font-size: 14px;
nav .navbar-nav li a:hover
color: #0082ff !important;
.site-header .navbar .navbar-collapse li > a
padding: 30px 0 !important;
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 100%;
a.md-header-estimate
font-size: 18px;
letter-spacing: 0px;
border-radius: 5px;
background: #b4b4b4;
opacity: 1;
font-weight: 500;
padding: 14px 42px;
color: white;
.md-header-cta-class
text-align: right;
.fa
position: absolute;
cursor: pointer;
transition: background 2s;
.fa:hover
background: #dcf7ff;
border-radius: 5px;
.padding-nav-left
padding-left: 70px;
.dropdown-menu a.dropdown-item
font-size: 14px;
font-weight: bold;
padding-top: 5px !important;
padding-bottom: 5px !important;
.nav-item .dropdown-menu li
padding-left: 25px !important;
padding-right: 15px !important;
.fa-chevron-down:before
line-height: 25px;
margin-left: 5px;
.dropdown-menu
position: absolute;
top: 100%;
left: 0;
margin: -1px 0 0 0;
.wrapper .navbar .dropdown.dropdown-menu
display: none;
margin: 0;
height: 100%;
min-width: 220px;
text-align: left;
background: #fff;
padding: 20px 0;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.4);
color: #16345e;
position: absolute;
z-index: 99999;
.wrapper .navbar .dropdown:hover .dropdown-menu
display: block;
.dropdown-toggle:after
content: "\f063";
font-size: 15px;
visibility: visible;
padding-left: 5px;
font-family: fontawesome;
.site-header .navbar .navbar-nav .active > a
border-bottom: 4px solid #ecf014 ;
@media screen and (max-width: 1400px)
.navbar-nav > li > a
font-size: 14px !important;
a.vk-header-phone
font-size: 16px;
@media screen and (max-width: 1650px)
.vk-header-cta-class
text-align: right;
@media screen and (min-width: 991px) and (max-width: 1200px)
.site-header .navbar .navbar-collapse li
padding-left: 0 !important;
.padding-nav-left
padding-left: 20px !important;
@media screen and (max-width: 991px)
.navbar-collapse
padding: 0;
button.navbar-toggler
float: right;
a.md-header-estimate
display: none;
.padding-nav-left
padding-left: 15px;
.site-header .navbar .navbar-collapse li a
padding-top: 10px !important;
padding-bottom: 10px !important;
@media screen and (max-width: 500px)
.country-logo-style
width: auto;
height: auto;
这可能是因为标题中的引导类 col-md-7 和 col-md-5 ？我不知道。 帮助伙计们。我需要在星期一之前为我的公司完成这项工作
【问题讨论】：
【参考方案1】：-
从 #masterhead 和 .siteheader 中移除溢出：隐藏
从 .dropdown-menu 中删除背景剪辑
【讨论】：
什么 iws 背景剪辑？ 我删除了溢出：隐藏，不知道什么是背景剪辑，但我从 .dropdown-menu 删除了位置：绝对，它仍然是相同的问题 prntscr.com/oh6hd6 ---- 现在它在移动响应方面的工作......这是一个进步:) 有一个属性叫background-clip：padding-box。它来自引导程序，你必须覆盖它>在这里看到它（prntscr.com/oh6l60） 是的，我明白了。我禁用了它，但我仍然遇到问题......在我将 display:block 放在 UL 下拉列表中后，它显示相同。给你？以上是关于如何修复此导航菜单 - 它不会显示的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 修复顶部的菜单。向下滚动时以后不会出现菜单？