› 技术笔记 › 知更鸟主题begin5.2导航高度修改教程

河边草 发表于 2018-8-12 21:54:54

知更鸟主题begin5.2导航高度修改教程

做个笔记，开始用这个主题的时候，导航虽然下拉的时候可以隐藏，但还是觉得高度还是太高了，决定吧高度变小一点。
第一步，打开主题样式文件：
路径/wp-content/themes/begin/style.css

第二部，用编辑软件Dreamweaver打开
查找修改/** 头部 **/整体高度：
#masthead {
      height: 120px
}

.logo-site, .logo-sites {
      position: relative;
      float: left;
      margin: 18px 0 0 10px;
      width: 220px;
      max-height: 50px;
      overflow: hidden;
      transition-duration: .5s;
}修改为（主要修改120PX和18PX这两个参数）：
#masthead {
      height: 92px;
}

.logo-site, .logo-sites {
      position: relative;
      float: left;
      margin: 7px 0 0 10px;
      width: 220px;
      max-height: 50px;
      overflow: hidden;
      transition-duration: .5s;
}继续查找/*一级样式*/
#site-nav-wrap {
      float: right;
      max-width: 70%;
}

#site-nav {}

#site-nav .down-menu li {
      display: block;
      float: left;
      height: 88px;
      line-height: 88px;
}

#site-nav .down-menu a {
      padding: 0 10px;
      color: #444;
      text-align: left;
      transition-duration: .2s;
}

#site-nav .sub-menu {}

#site-nav .down-menu > li > a:hover,
#site-nav .down-menu > li.sfHover > a {
      color: #fff !important;
      background: #3690cf;
}

#site-nav .down-menu > .current-menu-item > a{
      color: #444;
      height: 89px;
      line-height: 89px;
      border-bottom: 2px solid #3690cf;
}修改为（这里主要修改88PX和89PX这四个参数）：
#site-nav-wrap {
      float: right;
      max-width: 70%;
}

#site-nav {}

#site-nav .down-menu li {
      display: block;
      float: left;
      height: 60px;
      line-height: 60px;
}

#site-nav .down-menu a {
      padding: 0 10px;
      color: #444;
      text-align: left;
      transition-duration: .2s;
}

#site-nav .sub-menu {}

#site-nav .down-menu > li > a:hover,
#site-nav .down-menu > li.sfHover > a {
      color: #fff !important;
      background: #3690cf;
}

#site-nav .down-menu > .current-menu-item > a{
      color: #444;
      height: 60px;
      line-height: 60px;
      border-bottom: 2px solid #3690cf;
}继续修改搜索菜单高度/** 管理 **/.nav-search {
      font-size: 16px;
      font-size: 1.6rem;
      float: right;
      color: #777;
      line-height: 26px;
      margin: 30px 5px 0 5px;
      padding: 0 8px 3px;
      cursor: pointer;
}
修改为（这里主要修改margin: 30px这个参数）
.nav-search {
      font-size: 16px;
      font-size: 1.6rem;
      float: right;
      color: #777;
      line-height: 26px;
      margin: 17px 5px 0 5px;
      padding: 0 8px 3px;
      cursor: pointer;
}
好了，到这里基本完成了，大家可以根据自己的需要修改!

查看完整版本: 知更鸟主题begin5.2导航高度修改教程