为Sakurairo实现导航栏居中

该修改方案的优点是：
        1. 仅需少量修改主题文件，大多数更改在CSS样式中实现。
        2. 较完美的宽度自适应，在任何宽度下均不会出现重叠和错位。

前言

网上现有的修改方案在某些特殊宽度下会导致导航菜单下移或者导航菜单文字与Logo重叠，这显然不符合我有些强迫症的要求= =
所以本着生命不息折腾不止的精神，这次采用了新的方案来实现这一特性！

注：此方案仍需修改主题header.php，故希望第一时间跟随主题更新的，应谨慎考虑。

修改方法

修改header.php中的代码结构

在header.php文件中找到以下代码：

            <?php header_user_menu();            if (iro_opt('nav_menu_search') == '1') { ?>                <div class="searchbox"><i class="iconfont js-toggle-search iconsearch icon-search"></i></div>            <?php } ?>

修改为：

            <div class="avatar2search">            <?php header_user_menu();            if (iro_opt('nav_menu_search') == '1') { ?>                <div class="searchbox"><i class="iconfont js-toggle-search iconsearch icon-search"></i></div>            <?php } ?>            </div>

增加CSS样式

在iro主题设置-其他设置-低使用设置-自定义CSS样式中加入如下代码（此处对CSS样式做的修改在更新主题后不会丢失）

/*首页导航栏居中*/.site-top {    display: flex;    flex-direction: row;    justify-content: space-between;}.avatar2search {    order: 2;    flex-shrink: 0;}.lower {    order: 1;    flex-shrink: 0;}/**此部分实现当导航栏与Logo重叠或页面布局错位时删除Logo*请根据您导航菜单数量的不同自行修改'993px'这一数值*/@media (max-width:933px) {    .site-branding {        display:none;    }}@media (max-width:860px) {    .site-top {        flex-direction: row-reverse;    }    .site-branding {        display:block;    }}

附加的一些样式优化

以下CSS样式请您按需自行选择是否添加。

/*导航栏白底色固定显示*/.site-header {    background: rgba(255, 255, 255, .75);}/*导航栏夜间模式优化*/body.dark .site-header {    background-color: rgba(38,38,38,0.8);}

转载自》 为Sakurairo实现导航栏居中