Sakurairo菜单居中

发布于 2022-03-29  476 次阅读

本文最后更新于2022年5月1日，已超过 30 天没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

首先，header.php 搜索下面按代码(约133行)

<div class="lower"><?php if (iro_opt('nav_menu_display') == 'fold') { ?>

把下面代码删除 约133-140行

			<div class="lower"><?php if (iro_opt('nav_menu_display') == 'fold') { ?>
					<div id="show-nav" class="showNav">
						<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>

然后在下面代码 约 128 行

</div><!-- .site-branding -->

的下面添加

		<div class="lower-cantiner">
						<div class="lower"><?php if (iro_opt('nav_menu_display') == 'fold') { ?>
					<div id="show-nav" class="showNav">
						<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 或者Sakurairo主题的 style.css 最底部添加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: 48.5%;
    min-width: 450px;
    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;
    }
}

css代码中 13行 left: 48.5%; 根据菜单数量，图标。需要你自己测试居中数值。 保存刷新即可。

赏