RIPRO下拉菜单美化教程

需要修改两个文件分别为：主题民航 / 增加css

主题文件地址：/ripro/parts/navbar.php

直接复制替换整个文件

主题CSS文件地址：/ripro/assets/css/diy.css

直接复制粘贴到diy.css文件最下面即可

navbar.php文件代码如下

nnnnnnnnnnnnn<?php
  global $current_user;
  $container = _cao( 'navbar_full', false );
  $mode_search = _cao('mode_search');
  $image = $mode_search['bgimg'];
  $CaoUser = new CaoUser($current_user->ID);
  $categories = get_categories( array('hide_empty' => 0) );//获取所有分类
  $menu_class = 'main-menu hidden-xs hidden-sm hidden-md';
  if ( cao_compare_options( _cao( 'navbar_hidden', false ), rwmb_meta( 'navbar_hidden' ) ) == true ) {
    $menu_class .= ' hidden-lg hidden-xl';
  }
  $logo_regular = _cao( 'site_logo');
  $logo_regular_dark = _cao( 'site_dark_logo');
?>

<header class="site-header">
  <?php if ( $container == false ) : ?>
    <div class="container">
  <?php endif; ?>
    <div class="navbar">
      <div class="logo-wrapper">
      <?php if ( ! empty( $logo_regular ) ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
          <img class="logo regular tap-logo" src="<?php echo esc_url( $logo_regular ); ?>" data-dark="<?php echo esc_url(_cao( 'site_dark_logo')); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
        </a>
      <?php else : ?>
        <a class="logo text" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a>
      <?php endif; ?>
      </div>
   
      <nav class="<?php echo esc_attr( $menu_class ); ?>">
        <?php wp_nav_menu( array(
          'container' => false,
          'fallback_cb' => 'Cao_Walker_Nav_Menu::fallback',
          'menu_class' => 'nav-list u-plain-list',
          'theme_location' => 'menu-1',
          'walker' => new Cao_Walker_Nav_Menu( true ),
        ) ); ?>
      </nav>
      
      <div class="main-search">
        <?php get_search_form(); ?>
        <div class="search-close navbar-button"><i class="mdi mdi-close"></i></div>
      </div>
      <div class="sep"></div>
            <form method="get" class="search-form inline" action="<?php echo home_url(); ?>">
        <input type="text" class="search-field inline-field" placeholder="输入关键词，回车..." autocomplete="off" value="" name="s" required="required">
        <button type="submit" class="search-submit"><i class="mdi mdi-magnify"></i></button>
      </form> 
      <div class="actions">

        <!-- user -->
       
        <?php if (is_user_logged_in()) : ?>
       <div class="hhnavwarp">
          <a class="user-pbtn Hhhover" href="<?php echo esc_url(home_url('/user')) ?>"><?php echo get_avatar($current_user->user_email); ?>
  <?php if(!_cao('is_navbar_ava_name','0')){
            echo '<span>'.$current_user->display_name.'</span>';
          }?>
          </a>
           <div class="Huserxiala">
               <div class="Hinfo">
                  <div class="Hleft"><?php echo get_avatar($current_user->user_email); ?></div>  
                      <div class="Hright">
                          <a href="<?php echo esc_url(home_url('/user'))?>"><?php echo $current_user->display_name;?></a>
                         <?php 
                        if ($CaoUser->vip_status()) {
                                                        echo '<span class="label label-warning"><i class="fa fa-diamond"></i> '.$CaoUser->vip_name().'用户</span>';
                        }else{
                                                       echo '<span class="label label-default"><i class="fa fa-user"></i> '.$CaoUser->vip_name().'用户</span>';
                        }
                    ?>     
                        <p><span class="Hxiaofei">余额：<?php echo $CaoUser->get_balance();?></span><span class="Hxiaofei">已消费：<?php echo $CaoUser->get_consumed_balance();?></span>
                      
                      
                      </p></div></div>
              <div class="Hinfolist">
                  <ul>
                  <li><a href="<?php echo home_url('/user?action=index') ?>"><i class="fa fa-user-secret"></i> 个人信息</a></li>
                  <li><a href="<?php echo home_url('/user?action=mypay') ?>"><i class="fa fa-file-text"></i> 订单中心</a></li>
                  <li><a href="<?php echo home_url('/user?action=charge') ?>"><i class="fa fa-paypal"></i> 充值中心</a></li>
                  <li><a href="<?php echo home_url('/user?action=ref') ?>"><i class="fa fa-paper-plane"></i> 推广佣金</a></li>
                <li><a href="<?php echo home_url('/wp-admin/index.php') ?>"><i class="fa fa-unlock-alt"></i> 登陆后台</a></li>
                  <li><a class="Hexit" href="<?php echo wp_logout_url(home_url()); ?>"><i class="fa fa-sign-out"></i> 退出登录</a></li>
                                    </ul>
                  </div>    </div>    </div>    
         <div class="burger navbar-button"><i class="fa fa-list"></i></div>
                 <?php else: ?>
 
            <div class="login-btn navbar-button"><i class="mdi mdi-account"></i> 登录</div>
         <div class="burger zzhuti-button"><i class="fa fa-list"></i></div>
        <?php endif; ?>

        <!-- user end -->
        <div class="search-open navbar-button"><i class="mdi mdi-magnify"></i></div>
        <?php if (_cao('is_ripro_dark_btn')) : ?>
        <div class="tap-dark navbar-button"><i class="mdi mdi-brightness-4"></i></div>
        <?php endif; ?>
       
      </div>
    </div>
  <?php if ( $container == false ) : ?>
    </div>
  <?php endif; ?>
</header>

<div class="header-gap"></div>

添加css代码如下

@media (max-width: 767px) {
    .search-form{
        display: none
    }
}

.navbar .zzhuti-button, .off-canvas .canvas-close {
    top: 0px;
    align-items: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.owl .owl-dot.active {
    background: linear-gradient(-125deg,#0295f9 0%, #2f49fd 100%);
    box-shadow: 0 8px 10px rgba(32,160,255,.3);
    }

.u-text-format>*:last-child, .u-text-format>*:last-child>*:last-child {
    box-shadow: 1px 5px 20px 0px #ccc;
}

.related-posts .entry-media {
    width: 277px;
    box-shadow: 0 8px 10px #e6e6e6;
}

.widget-userinfo .author-qiandao .btn {
    box-shadow: 0 8px 10px rgba(32,160,255,.3);
}
.owl .owl-dot {
    background: linear-gradient(-125deg,#0295f9 0%, #2f49fd 100%);
    box-shadow: 0 8px 10px rgba(32,160,255,.3);
}

.button, input[type="submit"], button[type="submit"], .navigation .nav-previous a, .navigation .nav-next a {
   width:200px;
}

.btn--secondary{
    background: linear-gradient(-125deg,#0295f9 0%, #2f49fd 100%);
    -webkit-box-shadow: 0 8px 10px rgba(32,160,255,.3);
    box-shadow: 0 8px 10px rgba(32,160,255,.3);
}


.burger:before, .burger:after {
    width: 0px;
}

.zzhuti_qd_1:hover {
    background: #ffffff;
    box-shadow: 0 8px 10px rgba(32,160,255,.3);
    color: #0295f9;
}

.zzhuti_qd_1{
    background: linear-gradient(-125deg,#0295f9 0%, #2f49fd 100%);
    box-shadow: 0 8px 10px rgba(32,160,255,.3);
    color: #FFF;
}

.navbar .user-pbtn img {
    height: 40px;
    width: 40px;.
      box-shadow: 0 3px 8px 0 rgba(7,17,27,0.2);
}


/*nav*/

.navbar .hhnavwarp:hover .Huserxiala {
    display: block;
}
.navbar{
height: 56px;
}
.navbar .menu-item>a {
    font-weight: 400;
}
.header-gap {
    height: 56px;
}
.sub-menu:before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 1px;
    background-color: #fff;
    /* box-shadow: 0 0 7px rgba(0,0,0,0.13); */
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: -5px;
    left: 40px;
    z-index: 0;
}
.Huserxiala .Hinfo .Hright {
    float: left;
}

.Huserxiala .Hinfo .Hright a {
    font-weight: bold;
    color: rgba(8,18,28,1);
    line-height: 48px;
}

.Huserxiala .Hinfo .Hright p {
    font-size: 12px;
    font-weight: bold;
    color: rgba(147,153,159,1);
    line-height: 18px;
}
.Huserxiala .Hinfo .Hright .Hxiaofei{flaot:left;margin-right:5px;}
.Huserxiala .Hinfolist {
    width: 100%;
    height: auto;
    position: relative;
    top: 8px;
}
.Huserxiala .Hinfolist ul li .Hhoutai{color:#666;background: none;
    font-size: 14px;
    padding-top: 0px;}
.Huserxiala .Hinfolist ul li .Hhoutai .showguanliyuanrenzheng{font-size:14px}
.Huserxiala .Hinfolist ul li .Hhoutai:hover{ 
    background: none;
    color: #333;}  
.Huserxiala .Hinfolist ul li {
    width: 50%;
    float: left;
    list-style: none;
    width: 128px;
    padding: 0 10px 10px 0
}

.Huserxiala .Hinfolist ul li a:hover {
    border-radius: 2px;
    color: #fff;
    background: linear-gradient(-125deg,#0295f9 0%, #2f49fd 100%);
    -webkit-box-shadow: 0 8px 10px rgba(32,160,255,.3);
}

.Huserxiala .Hinfolist ul li a {
    border-radius: 2px;
    background: rgba(242, 244, 247, 0.85);
    color: #343d46;
    display: block;
    padding: 8px 10px;
}

.Huserxiala .Hinfolist ul li .Hexit {
    background: none;
    font-size: 14px;
    color: rgba(178,175,174,1);
    padding-top: 10px
}

.Huserxiala .Hinfolist ul li .Hexit:hover {
    background: none;
    -webkit-box-shadow: none;
    color: #0295f9;
}


.navbar .main-menu li a .shownew2 {
    color: rgb(234, 67, 53);
    display: inline-block;
    position: relative;
    top: -9px;
    left: 3px;
}

.Huserxiala {
    width: 307px;
    height: 264px;
    right: 0;
    background: rgba(255,255,255,1);
    border-radius: 0px 0px 10px 10px;
    position: absolute;
    top: 80px;
    box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2);
    display: none;
}

.Huserxiala .Hinfo {
    padding: 25px;
    width: 100%;
    height: auto;
}

.Huserxiala .Hinfo .Hleft {
    width: 84px;
    float: left
}

.Huserxiala .Hinfo .Hleft img {
    border-radius: 50%;
    width: 72px;
    height: 72px;
}

.navbar .user-pbtn {
    height: 72px;
}

.navbar .login-btn {
    margin: 0 20px;
    color: #4d555d;
    background-color: #ffffff00;
    font-size: 14px;
}

.HhCooltitle{margin-top:20px}

    
    .navbar .actions>div+div{font-weight:700}
    
}

.navbar .actions>div+div {
    margin-left: 5px;
    font-weight: 700;
}

.showcaidan:before {
  content: "\eaf1";
}

.show {
  font-family: "show" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-header{
height: 80px;
}
.navbar{
height: 80px;
}
.header-gap {
    height: 80px;
}
.navbar .sub-menu{
    margin: -14px 0 0 -14px;
}

.navbar .navbar-button, .off-canvas .canvas-close{
    background-color: #f7f7ff;
    border: 1px solid #f7f7ff;
    color: #0056ff;
    background-image: none;
    -webkit-animation:none;
      top:20px;
}
.label-default {
    background: linear-gradient(-125deg,#0295f9 0%, #2f49fd 100%);
    box-shadow: 0 6px 16px -5px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 4px 11px;
}