Beaver Builder 和使用 Beaver Themer 进行自定义页头编辑,添加搜索框的方法。

Beaver Builder 和使用 Beaver Themer 进行自定义页头编辑,添加搜索框的方法。


正在查看 1 个帖子:1-1 (共 1 个帖子)
  • 作者
    帖子
  • 诗语
    管理员
    • 文章数量: 5,858
    @feibisi
    楼主

    以下是使用Beaver Themer在Beaver主题中完成标题菜单后添加搜索图标的方法。

    1、为Beaver Builder 搜索功能创建一个简码

    add_shortcode( 'bb_search','bb_search_shortcode' );
    /* Add Search via shortcode */
    function bb_search_shortcode() {
    ob_start();
    FLTheme::nav_search();
    return ob_get_clean();
    }

    2、在Beaver Themer中创建页头

    通过将创建在 Beaver Themer 新的页头主题布局菜单和一个HTML模块在一个行 -的HTML模块中添加上述使用由简码
    [bb_search]

    3、添加CSS类

    • 找到行 – 主菜单 – main-menu-search-row
    • 找到菜单栏 – main-menu-col
    • 找到HTML 列 – main-search-col

    4、关闭均衡栏高

    5、添加一些 css

    .main-menu-search-row .fl-col-group {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    }
    
    .main-menu-col {
    width: auto;
    }
    
    .main-search-col {
    position: relative;
    top: 5px;
    width: auto;
    }
    
    .main-search-col .fl-page-nav-search {
    display: block;
    }

    现在一切都应该居中,默认情况下搜索图标隐藏在992px下,上面的最后一条CSS规则会覆盖它。

正在查看 1 个帖子:1-1 (共 1 个帖子)
  • 哎呀,回复话题必需登录。

未找到对应子版块?请直接在 [疑难杂症] 版块中发帖提问。

收藏纪念品


有奖活动

参与论坛社区问答,有机会获赠文派瓦普(Wapuu.com)手办模型。

话题信息

商业系统