头部导航栏顶部 – 搜索栏

需要拉大 Logo 隐藏原来搜索图标

将代码放到外光布局 – > 首页设置（电脑端） -> 【头部导航栏顶部】自定义内容 即可。

<div class="jinsom-header-content clear">
 
<div class="jinsom-menu"><ul id="menu-menu-1" class="clear" style="margin-left:220px;margin-top:22px;">
  <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-17"><div class="jinsom-pop-search-container">
  <div class="jinsom-pop-search-content">
    <input type="text" placeholder="搜索您感兴趣的内容">
    <span class="opacity">搜索</span>
  </div>
</div>
</li>
</ul>
</div> 
</div>
 
<style>
/*导航剪短*/
.jinsom-menu-fixed {
    padding-top: 00px !important;
}
/*搜索栏 颜色*/
.jinsom-pop-search-content input {
    width: 380px;
    padding: 0px 10px;
    line-height: 36px;
    flex: 3;
    border-radius: 3px 0 0 0px !important;
    background-color: #f9f9f9 !important;
    border-color: #777777 !important;
    border: 0.5px solid #a1a1a1 !important;
}
/*搜索栏 高度*/
.jinsom-pop-search-content {
    height: 32px;
    padding: 0 0 40px;
    display: flex;
}
/*搜索按钮 颜色*/
.jinsom-pop-search-content span {
    background-color: #777;
    color: #fff;
    cursor: pointer;
    height: 32px;
    flex: 1;
    line-height: 31px;
    font-size: 16px;
    border-radius: 0 3px 3px 0;
}
/*logo上偏*/
.jinsom-header-content .logo a {
    float: left;
    width: 300px;
    height: 76px;
    margin-top: -40px;
    margin-left: -50px;
    background: url(../../images/logo.png);
    background-repeat: no-repeat !important;
    background-size: cover;
}
/*menu偏移右边*/
.jinsom-menu {
    width: 500px;
    float: left;
    height: 50px;
    margin-left: 45px;
}
/*menu 头像偏移左边*/
.jinsom-header-right {
    float: right;
    position: relative;
    height: 50px;
    margin-right: 67px;
}
/*导航不固定*/
.jinsom-header {
    position: unset;
    z-index: 1001;
    background-color: #fff !important;
    width: 100%;
    margin: auto;
    min-width: 1100px;
    color: #fff;
}
</style>