WordPress知更鸟主题Begin导航高度修改教程

wp美化1757K views3阅读模式

方法一是转自艺优博客、企鹅感觉这有点复杂，导航的高度显得宽了些，以下是调整的教程。

WordPress知更鸟主题Begin导航高度修改教程

第一步，打开主题样式文件：

路径/wp-content/themes/begin/style.css

第二部，用编辑软件Dreamweaver打开

查找/** 头部 **/修改整体高度：

  1. #masthead {
  2.         height: 120px
  3. }
  5. .logo-site, .logo-sites {
  6.         position: relative;
  7.         float: left;
  8.         margin: 18px 0 0 10px;
  9.         width: 220px;
  10.         max-height: 50px;
  11.         overflow: hidden;
  12.         transition-duration: .5s;
  13. }

修改为（主要修改120PX和18PX这两个参数）：

  1. #masthead {
  2.         height: 92px;
  3. }
  5. .logo-site, .logo-sites {
  6.         position: relative;
  7.         float: left;
  8.         margin: 7px 0 0 10px;
  9.         width: 220px;
  10.         max-height: 50px;
  11.         overflow: hidden;
  12.         transition-duration: .5s;
  13. }

继续查找/*一级样式*/

  1. #site-nav-wrap {
  2.         float: right;
  3.         max-width: 70%;
  4. }
  6. #site-nav {}
  8. #site-nav .down-menu li {
  9.         display: block;
  10.         float: left;
  11.         height: 88px;
  12.         line-height: 88px;
  13. }
  15. #site-nav .down-menu a {
  16.         padding: 0 10px;
  17.         color: #444;
  18.         text-align: left;
  19.         transition-duration: .2s;
  20. }
  22. #site-nav .sub-menu {}
  24. #site-nav .down-menu > li > a:hover,
  25. #site-nav .down-menu > li.sfHover > a {
  26.         color: #fff !important;
  27.         background: #3690cf;
  28. }
  30. #site-nav .down-menu > .current-menu-item > a{
  31.         color: #444;
  32.         height: 89px;
  33.         line-height: 89px;
  34.         border-bottom: 2px solid #3690cf;
  35. }

修改为（这里主要修改88PX和89PX这四个参数）：

  1. #site-nav-wrap {
  2.         float: right;
  3.         max-width: 70%;
  4. }
  6. #site-nav {}
  8. #site-nav .down-menu li {
  9.         display: block;
  10.         float: left;
  11.         height: 60px;
  12.         line-height: 60px;
  13. }
  15. #site-nav .down-menu a {
  16.         padding: 0 10px;
  17.         color: #444;
  18.         text-align: left;
  19.         transition-duration: .2s;
  20. }
  22. #site-nav .sub-menu {}
  24. #site-nav .down-menu > li > a:hover,
  25. #site-nav .down-menu > li.sfHover > a {
  26.         color: #fff !important;
  27.         background: #3690cf;
  28. }
  30. #site-nav .down-menu > .current-menu-item > a{
  31.         color: #444;
  32.         height: 60px;
  33.         line-height: 60px;
  34.         border-bottom: 2px solid #3690cf;
  35. }

继续修改搜索菜单高度/** 管理 **/

  1. .nav-search {
  2.         font-size: 16px;
  3.         font-size: 1.6rem;
  4.         float: right;
  5.         color: #777;
  6.         line-height: 26px;
  7.         margin: 30px 5px 0 5px;
  8.         padding: 0 8px 3px;
  9.         cursor: pointer;
  10. }

修改为（这里主要修改margin: 30px这个参数）

  1. .nav-search {
  2.         font-size: 16px;
  3.         font-size: 1.6rem;
  4.         float: right;
  5.         color: #777;
  6.         line-height: 26px;
  7.         margin: 17px 5px 0 5px;
  8.         padding: 0 8px 3px;
  9.         cursor: pointer;
  10. }

好了，到这里基本完成了，大家可以根据自己的需求进行修改!

 

方法二（企鹅博客自用推荐）简单一步即可

css加入自定义风格中代码可以自定义简化

此处为隐藏的内容
发表评论并刷新，方可查看
发表评论

企鹅SEO
  • 本文由 发表于 2019年4月28日 14:52:31
  • 转载请务必保留本文链接：https://www.qieseo.com/21828.html
评论  17  访客  17
    • 艺优网络
      艺优网络 1
      1F

      不错不错，味道好极了

      • 王五
        王五 1
        2F

        b棒棒哒

        • liu
          liu 0
          3F

          来了 老弟

          • 糖果博客
            糖果博客 0
            4F

            感谢分享

            • 網絡攻城獅
              網絡攻城獅 1
              5F

              学习学习

              • 支持
                支持 1
                6F

                不错不错，味道好极了

                • 艺优网络
                  艺优网络 1
                  7F

                  评论好几次了啊

                  • 小白
                    小白 1
                    8F

                    学习了，谢谢分享

                    • 好一个秋
                      好一个秋 1
                      9F

                      第一种有的找不到

                      • 白小白
                        白小白 0
                        10F

                        学习了

                        • 白小白
                          白小白 1
                          11F

                          学习胰腺癌，谢谢分享

                          • 绿软吧（lvr8.com）
                            绿软吧（lvr8.com） 0
                            12F

                            感谢分享

                            • 差不多的男孩
                              差不多的男孩 3
                              13F

                              看看简单的

                              • 柚子
                                柚子 0
                                14F

                                好

                                • 至韵飞鱼
                                  至韵飞鱼 0
                                  15F

                                  牛逼，改半天了

                                  • 小丑鸭
                                    小丑鸭 0
                                    16F

                                    胸谢谢分享，棒棒哒

                                    • 武汉寒士
                                      武汉寒士 0
                                      17F

                                      这个网站不错，学习学习

                                    发表评论