Question

我正在将 Astra 主题与 Elementor 结合使用，以使用WordPress构建网站。

我浏览了以下网站：https://blog.hubspot.com/website/sticky-menu-wordpress和https://themeskills.com/find-css-class-id-wordpress/

而且，在我的Customizing-> Additional CSS中，我编写了以下代码：

#masthead {
height:60px;
z-index:100;
margin:0 auto;
 border-bottom:0.5px solid #dadada;
 width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;

}

但是，我无法保留菜单。图片在这里：

<header class="site-header ast-primary-submenu-animation-fade header-main-layout-1 ast-primary-menu-enabled ast-hide-custom-menu-mobile ast-menu-toggle-icon ast-mobile-header-inline" id="masthead" itemtype="https://schema.org/WPHeader" itemscope="itemscope" itemid="#masthead">

            
            
<div class="main-header-bar-wrap">
    <div class="main-header-bar">
                <div class="ast-container">

            <div class="ast-flex main-header-container">
                
        <div class="site-branding">
            <div class="ast-site-identity" itemtype="https://schema.org/Organization" itemscope="itemscope">
                            </div>
        </div>

        <!-- .site-branding -->
                <div class="ast-mobile-menu-buttons">

            
                    <div class="ast-button-wrap">
            <button type="button" class="menu-toggle main-header-menu-toggle ast-mobile-menu-buttons-fill" aria-controls="primary-menu" aria-expanded="false" data-index="0">
                <span class="screen-reader-text">Main Menu</span>
                <span class="menu-toggle-icon"></span>
                            </button>
        </div>
            
            
        </div>
            <div class="ast-main-header-bar-alignment"><div class="main-header-bar-navigation"><nav class="ast-flex-grow-1 navigation-accessibility" id="site-navigation" aria-label="Site Navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope"><div class="main-navigation"><ul id="primary-menu" class="main-header-menu ast-nav-menu ast-flex ast-justify-content-flex-end  submenu-with-border astra-menu-animation-fade " aria-expanded="false"><li id="menu-item-1510" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-1510"><a href="http://this-is-for-so.com/" aria-current="page">Home</a></li>
<li id="menu-item-1508" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1508"><a href="http://this-is-for-so.com/all-courses/">Cloud</a></li>
<li id="menu-item-1509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1509"><a href="http://this-is-for-so.com/about/">About</a></li>
<li id="menu-item-1506" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1506"><a href="http://this-is-for-so.com/contact/">Contact</a></li>
<li id="menu-item-1507" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1507"><a href="http://this-is-for-so.com/my-account/">My Account</a></li>
</ul></div></nav></div></div>           </div><!-- Main Header Container -->
        </div><!-- ast-row -->
            </div> <!-- Main Header Bar -->
</div> <!-- Main Header Bar Wrap -->

            
        </header>

可能是什么问题？如果使用代码无法正常工作，是否有免费的插件可用于执行此操作？

Answer 1

我认为您只是将代码应用于错误的元素。在CSS中，您使用#masthead的ID，但是在html代码中，元素具有.main-header-bar-wrap的类。因此，这可能是您遇到问题的原因。但我想更进一步，以确保您的问题得到解决。

首先，我想对您的CSS代码进行一些改进。您应该将属于在一起的属性放在一起，例如width和height。这样可以更好地概述样式。避免使用不需要或无效的属性。

.main-header-bar-wrap {
    width: 100%;
    height: 60px;
    position:fixed;
    top:0;
    left:0;
    z-index: 100;
    border-bottom:0.5px solid #dadada;
}

在图像中，文字在右侧。因此，您不需要text-align: center。 margin: 0 auto用于将元素居中对齐。但是您的导航宽度为100％，因此您无需将导航栏居中。此外，top和left就足够了，因为它告诉浏览器元素的放置位置，而width: 100%会拉伸整个页面。

使用您的浏览器中的检查器（右键单击）找出是否应用了您的代码。

主题的“自定义样式”字段可能存在问题，并且根本没有使用该代码。因此，您不会得到想要的结果。

确保样式不会被主题文件覆盖

在某些情况下，出于奇怪的原因，自定义样式不在CSS文件的底部使用，而是在顶部使用。因此，您的样式可能会被代码覆盖。您可以确保使用!important来使用样式。使用浏览器的检查器（第1步），可以显示出样式被删除，从而显示出样式已被覆盖。例如：

.main-header-bar-wrap {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    z-index: 100 !important;
}

修复WordPress的菜单位置

1 个答案: