顶部隐藏导航

首先,我们打开主题下的 header.php 文件,搜索下面代码(大约 105 行),

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

修改为下面代码。

1
2
3
4
5
<?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 } ?>

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

菜单栏居中

接着还在 header.php 文件搜索下面代码(改隐藏导航前约 133 行,隐藏后约 137行),

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

把下面代码删除(改隐藏导航前 约 133-140 行,隐藏后约 137-144 行),

1
2
3
4
5
6
7
8
<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 行,隐藏后约 132 行),

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

的下面添加

1
2
3
4
5
6
7
8
9
10
<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 底部添加,会错位)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* 菜单栏居中 */
.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;
}
}