修正wordpress的菜单位置

提问者：小点点

修正wordpress的菜单位置

我使用Astra主题与元素建立在网站上使用WordPress。

我浏览过以下网站:https://blog.hubspot.com/website/sticky-menu-wordpress

和https://themeskills.com/find-css-class-id-wordpress/

而且，在我的定制中->；另外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;

}

但是，我不能贴菜单。

null

<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>

null

有什么问题吗？请帮忙解决这个问题？如果它不能使用代码，有任何免费的插件可以做这件事吗？

谢谢

共1个答案

匿名用户

我认为您只是将代码应用到了错误的元素。在CSS中，您使用#mathead的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。 边距:0 auto用于将元素居中对齐。但是您的导航是100%的宽度，因此您不需要将导航栏居中。此外，顶部和左侧就足够了，因为它告诉浏览器将元素放在哪里，而宽度:100%将拉伸整个页面。

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

可能是主题的“Custom Styles”字段出了问题，而且根本没有使用代码。所以你不会得到你想要的结果。

在某些情况下由于奇怪的原因，自定义样式不是用在CSS文件的底部，而是用在顶部。因此，您的样式可能会在代码中被覆盖。您可以确保使用！重要信息时使用您的样式。使用浏览器的检查器（步骤1）将通过显示样式被删除来显示样式被覆盖。例如:

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