个人中心
gpt4 book ai didi

css - 如何修复此导航菜单 - 它不会显示

转载 作者：太空宇宙 更新时间：2023-11-04 00:46:07 25 4
gpt4 key购买 nike

您可以在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 class 并且它出现了但是像这样查看图片--> http://prntscr.com/oh5lzk正如您在这张图片上看到的那样，它通过下拉菜单推送了我的 Logo 和免费估价。

标题.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" alt="Pro Denver Movers Logo" ></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;
  }
}

可能是因为 header 中的引导类 col-md-7 和 col-md-5？我不知道。帮助伙计们。我需要在星期一之前为我的公司完成这项工作

最佳答案

  1. 从 #masterhead 和 .siteheader 中移除 overflow:hidden
  2. 从 .dropdown-menu 中删除背景剪辑

关于css - 如何修复此导航菜单 - 它不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57107502/

25 4 0
文章推荐： angularjs - 使用 Angular.js 和 Node.js 将当前集合插入到另一个服务器中
文章推荐： python - 使用 Matplotlib 从字典中绘制日期和关联值
文章推荐： node.js - 自定义验证错误被设置多次
文章推荐： html - 当 div 超过 100% 时，CSS 会忽略 margin-right