### [B2 Pro 主题【社交类型菜单】优化教程](https://guaqi.com/article/51174)

**Published:** 2021-05-28T09:33:46

**Author:** 娃哈哈喝牛奶

**Excerpt:** 本教程主要小优化了一下【社交类型菜单】样式，把这个菜单改成一层。之前我的子主题就用的这样的样式，但是有些小细节不好，本教程是升级版本☺️ 本教程非常简单，先看一下修改效果： 下面是教程： 1、设置顶部菜单样式 设置项在：B2主题设置 – 模块管理 – 顶部 – 顶部布局样式，选择以下样式： 如果你选择的是其他样式的菜单，请不要添加下面的css代码，避免引起布局样式错乱！ 2、添加css样式 请将以下css代码复制到你自己的css中。 添加完成后，就实现演示效果了~ 至此教程结束，感谢阅读。如果对本教程有疑问或建议请

本教程主要小优化了一下【社交类型菜单】样式，把这个菜单改成一层。之前我的子主题就用的这样的样式，但是有些小细节不好，本教程是升级版本☺️

**本教程非常简单，先看一下修改效果：**

我不推荐春哥把【社交类型菜单】改成这个样式，主要是这个样式可能是个小众喜欢的样式。如果喜欢这个样式大家可以自行修改。

**下面是教程：**

## 1、设置顶部菜单样式

设置项在：B2主题设置 – 模块管理 – 顶部 – 顶部布局样式，选择以下样式：

![B2 Pro 主题【社交类型菜单】优化教程](http://7b2.com/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)

如果你选择的是其他样式的菜单，请不要添加下面的css代码，避免引起布局样式错乱！

## 2、添加css样式

请将以下css代码复制到你自己的css中。

以下修改推荐在子主题中修改！

添加完成后，就实现演示效果了~

**至此教程结束，感谢阅读。如果对本教程有疑问或建议请在下面留言~**

**Categories:** 教程文章

**Comments:** 

**玛丽:** ?

**A19221:** 我也是小众?

**优雅的雀斑:** 感谢分享?

**hsd0321:** 请问在哪里添加CSS？

**hsd0321:** 请问在哪里添加？

**小飞鱼:** .site-header.social-top { height: 58px; background-color: #ffffff; } .logo img { /\*height: 22px;\*/ } .header-banner-left .menu li.current-menu-item a { color: #121212; font-weight: 600; } .site .site-header-in { box-shadow: none; } .site .site-header-in > div:last-child { box-shadow: 0 2px 4px rgba(114, 114, 117, 0.06); } .social-top .header { height: 58px; border: none; background-color: #ffffff; } .social-top .site.up .header { background-color: #ffffff; z-index: 7; } .top-style-blur { display: none; } .social-top .header-banner { position: absolute; transform: translate(0, 0); transition: transform 0.3s; } .social-top .site.up .site-header-in .header-banner { transform: translate(0, -58px); transition: transform 0.3s, background-color 0.3s ease-out; } .social-top .header .wrapper { height: 58px; opacity: 0; transform: translate(0, 20px); transition: transform 0.3s, background-color 0.3s ease-out, opacity 0.3s; } .social-top .site.up .site-header-in { transform: none; transition: none; } .social-top .site.up .top-style-bottom .wrapper { opacity: 1; transform: translate(0, 0); transition: transform 0.3s, background-color 0.3s ease-out, opacity 0.3s; } .social-top .header-banner-left .menu li a { font-size: 15px; } .social-top .top-menu ul li.depth-0 > a { font-size: 15px; color: #8590a6; opacity: 1; height: 58px; font-weight: 600; } .social-top .top-menu ul li.depth-0 > a i { font-weight: 600; } .social-top .mobile-box { justify-content: normal; } .social-top .mobile-box .mobile-show { display: block; } .social-top .mobile-box .top-submit { position: absolute; right: 0; display: flex; } @media screen and (max-width: 768px) { .social-top .logo img { /\*height: 20px;\*/ } .site-header.social-top { height: 90px; } .social-top .site.up .site-header-in { transform: translate(0, -43px); transition: transform 0.3s, background-color 0.3s ease-out; } .social-top .header .wrapper { opacity: 1; transform: none; } .social-top .site.up .site-header-in .header-banner { transform: none; } .social-top .top-submit { bottom: 16px; } }

**小飞鱼:** 感谢分享，很不错，很喜欢，但是使用以后右上角会有一个写文章的按钮，请问能否去掉。

**susuifa:** 请问大佬用的是什么子主题？我自己添加了您的代码，没办法像您一样显示?

**陈桥驿:** ![](https://static.7b2.com/wp-content/uploads/2021/05/11732536b20287caa6_51174_comment_drawing.png)

**速速网络:** 不错不错！！！



---