WooCommerce 店面标题：左侧的汉堡图标，右侧的搜索栏答案

【问题标题】：WooCommerce Storefront Header: Hamburger icon on left, search bar on rightWooCommerce 店面标题：左侧的汉堡图标，右侧的搜索栏
【发布时间】：2021-06-16 09:14:47
【问题描述】：

所以我希望在标题的搜索栏左侧有一个汉堡包图片。

删除主菜单：

add_action('init', 'remove_storefront_header_stuff' );
function remove_storefront_header_stuff(){
    remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
}

然后以与产品搜索相同的优先级添加它：

add_action('init', 'add_storefront_header_stuff' );
function add_storefront_header_stuff(){
   add_action( 'storefront_header', 'storefront_primary_navigation', 40 );
}

然后是一些 css：

.homeicon {
    background-image: url('/wp-content/uploads/2021/03/pfn_hamburger35x35.png');
    background-repeat: no-repeat;
    background-position: left;
}

.main-navigation {  
    width: 5%;
    float: left !important;
    margin:0;
}

.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
    color:#EDC965;
    opacity: 0;           /*(This was done just to hide the menu text)*/
    padding:1px;
}

.woocommerce-active .site-header .site-search {
    float: right !important;
    width: 90%;
    margin-bottom: 0 !important;
}

这样的结果是左边的汉堡包和右边的搜索。正如所料。但是汉堡包在搜索下方，并且没有在同一高度上对齐。有趣的是，现在看手机时，它看起来非常完美，手机菜单完美对齐。但在桌面上不是这样......

我能做什么？

【问题讨论】：

标签： css wordpress woocommerce storefront

【解决方案1】：

问题解决了。我去找了一个插件。但。我意识到线条的顺序意味着什么：

    function add_storefront_header_stuff(){
    add_action( 'storefront_header', 'storefront_product_search', 20 );
    add_action( 'storefront_header', 'storefront_secondary_navigation', 20 ); 
}

在相同的优先级下，搜索在二级导航的左侧。如果将导航放在首位，它将显示在搜索的左侧。

【讨论】：