这篇文章主要是导航的美化,其中包括柒比贰主题的logo后加文字,双列下拉菜单展示,右侧搜索投稿,头像下拉添加菜单

柒比贰美化-顶部菜单美化双列展示+logo后跟文字

1、顶部菜单下拉双列

操作:复制下列代码到你的子主题的style.css里面,再次建议大家使用子主题修改样式,新版本要出来了,2.80成了绝版,你把里面的东西改了,到时候想修改的时候会很麻烦。

关于某些数值需要修改的,自己去改一下,不一定适合你们的,div挤掉下来不可怕,没报错就不是大问题 (我的页面宽度设置是1310px,你们没改的应该是1140px,挤下来很正常)

/*导航菜单分栏*/ .zrz-menu-in .sub-menu { width: 252px; } 
.zrz-menu-in .sub-menu li { width: 50%; float: left; }
 .zrz-menu-in .sub-menu li a { padding: 13px; } 
.zrz-menu-in .sub-menu li a:hover { background-color: #e7e7e7; margin-right: 0; margin-left: 0; }
 @media screen and (max-width: 768px) { 
.menu-top { margin-left: 0; } 
.zrz-menu-in .sub-menu li { width: unset; float: unset; }
 .zrz-menu-in .sub-menu li a { padding: 10px; }
 .zrz-menu-in .sub-menu li a:hover { background-color: #cccccc; color: #000; }
 }
 .zt-item { background: #fff; /*margin-bottom: 15px*/ } 
@media (min-width:768px) 
{ .zt-item { /*margin-bottom: 30px*/ } }

 

2、logo后加文字及把导航文章右移

操作: 找到seven/inc/functions-templates.php里面,50行应该是一个“}”,后面跟上这么一句

echo '<div class="site-des">服务器推荐<br>专业的整合资源收集整理平台!</div>';

此处为css,位置同上style.css,加在后面

.site-des {
    margin-left: 147px;
    float: left;
    font-size: 12px;
    color: #999999;
    margin-top: 12px;
    line-height: 18px;
}
@media screen and (max-width:670px){
	.site-des{
    display:none  
}
}
/*菜单右移*/
.menu-top{
      margin-left:520px   }

/*菜单间隔*/
.menu-top ul>li {
    padding: 18px 5px;
}

2、搜索投稿:

操作:找到seven/inc/functions-templates.php ~~搜索sign-button-r mar10-r,然后在他的下一行添加如下代码

 <button class="head-vip text" @click="showWriteBox"><i class="zrz-icon-font-dengpao iconfont"></i>投稿</button>
 <button class="sousuo text" @click="showSearchBox('search')"><i class="iconfont zrz-icon-font-sousuo"></i> 搜索</button>

css样式添加在子主题style.css里面

.sign-button-r .head-vip {
    display: block;
    width: 36px;
    height: 58px;
    color: #fff;
    font-size: 12px;
    background-color: #6cb5fe;
    border-radius: 0 0 6px 6px;
    top: -12px;
}

.sign-button-r .sousuo {
    left: -45px;
    width: 36px;
    height: 58px;
    color: #fff;
    font-size: 12px;
    background-color: #fe958b;
    border-radius: 0 0 6px 6px;
    top: -70px;
}

@media screen and (max-width: 768px) {
    .menu-top {
        margin-left: 0;
    }
    .zrz-menu-in .sub-menu li {
        width: unset;
        float: unset;
    }
    .zrz-menu-in .sub-menu li a {
        padding: 10px;
    }
    .zrz-menu-in .sub-menu li a:hover {
        background-color: #cccccc;
        color: #000;
    }
}

3.可以在会员窗口添加 我的购物车/任务链接

inc/functions-templates.php ~144行

<a href="<?php echo esc_url(home_url('/cart')); ?>">
<i class="zrz-icon-font-haofangtuo400iconfont2gouwu iconfont"></i><?php echo __('购物车','7b2'); ?>
</a>
<a href="<?php echo esc_url(home_url('/task')); ?>">
<i class="zrz-icon-font-liwu iconfont"></i><?php echo __('任务','7b2'); ?>
</a>

有问题请下方留言

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。