sakura主题菜单局中

很多人问我方法，我都忘记了这件事，今天我们就来实现一下

首先，我们打开主题下的 header.php 文件，搜索下面代码

<header class="site-header no-select" role="banner">

修改为下面代码

		<?php if (is_front_page()){ ?><!--判断是否为首页-->
<header class="site-header no-select is-homepage" role="banner">
<?php }else{ ?>
<header class="site-header no-select" role="banner">
<?php } ?>

此代码为首页顶部隐藏导航菜单，不需要隐藏可跳过此部分!

然后搜索下面代码

<div class="lower"><?php if(!akina_option('shownav')){ ?>

把下面图片红圈的代码都删除掉 (大约122-129行的代码)

然后往上面移动三行，在代码

<?php header_user_menu(); if(akina_option('top_search') == 'yes') { ?>

的上面添加下面代码：

<div class="lower-cantiner">
    <div class="lower"><?php if(!akina_option('shownav')){ ?>
        <div id="show-nav" class="showNav mobile-fit">
            <div class="line line1"></div>
            <div class="line line2"></div>
            <div class="line line3"></div>
        </div><?php } ?>
        <nav class="mobile-fit-control hide"><?php wp_nav_menu( array( 'depth' => 2, 'theme_location' => 'primary', 'container' => false ) ); ?></nav><!-- #site-navigation -->
    </div>
</div>

注意，sakurairo 2.0的版本是添加下面代码

<div class="lower-cantiner">
					<div class="lower"><?php if(iro_opt('nav_menu_display') == 'fold'){ ?>
						<div id="show-nav" class="showNav mobile-fit">
							<div class="line line1"></div>
							<div class="line line2"></div>
							<div class="line line3"></div>
						</div><?php } ?>
						<nav><?php wp_nav_menu( array( 'depth' => 2, 'theme_location' => 'primary', 'container' => false ) ); ?></nav><!-- #site-navigation -->
                    </div>		</div>

最后添加自定义css

/* 菜单栏居中 */
.site-header.is-homepage .lower-cantiner {
    display: none;
}
.site-header.is-homepage.yya .lower-cantiner {
    display: block;
}
.site-header:hover.is-homepage .lower-cantiner {
    display: block;
}
.site-top .lower-cantiner {
    position: absolute;
    left: 50%;
    min-width: 758.4px;
    pointer-events: none;
}
#show-nav.mobile-fit {
    position: fixed !important;
    right: 120px;
    opacity: 0;
    pointer-events: none;
}
/*此属性需要修改*/
.site-top .lower {
    position: relative;
    display: inline-block;
    margin: 15px 0 0 10px;
    font-size: 16px;
    left: -50%;
    pointer-events: auto !important;
}
/*此属性需要修改*/
@media(max-width:1200px) {
    .site-top .lower nav{
        right: calc(-150px - 100%);
        position: absolute;
        float: right;
        animation: searchbox .2s;
        min-width: 860px;
        z-index: -1
    }
    .site-top .lower nav.navbar {
        right: calc(-50px - 100%);
    }
    .site-top .lower nav.navbar ul {
        background: #fff;
    }
}