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

企鹅博客 2019年4月28日14:52:31 4 41,375 views

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

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

第一步,打开主题样式文件:

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

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

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

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

修改为(主要修改120PX和18PX这两个参数):

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

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

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

修改为(这里主要修改88PX和89PX这四个参数):

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

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

  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加入自定义风格中代码可以自定义简化

此处为隐藏的内容!
发表评论并刷新,方可查看
weinxin
欢迎加入中国SEO站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
企鹅博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  4   博主  0

    • avatar 艺优网络 1

      不错不错,味道好极了

      • avatar 王五 1

        b棒棒哒

        • avatar liu 0

          来了 老弟

          • avatar 糖果博客 0

            感谢分享