如何将此徽标置于 Shopify 主题的中心？

Question

目前正在处理此站点 (https://www.wilsonluxe.com/) - 我想将徽标放在中间，导航在左侧，如果可能的话，搜索栏可能在右侧？

我希望导航类似于这样：https://dealsweel.com/

如有任何帮助，我们将不胜感激

我试过使用 Shopify 主题液体，但它的组织方式与香草略有不同 CSS，这是我习惯的！

Answer 1

你可以用 display: flex; 试试这个：

@media screen and (min-width: 769px){
    .site-header .grid, .site-header .grid--rev, .site-header .grid--full {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .site-header .grid>.grid__item, .site-header .grid--rev>.grid__item, .site-header .grid--full>.grid__item {
        /* float: none; */
        /* display: table-cell; */
        /* vertical-align: middle; */
        width: 60%;
    }
}

.grid__item.post-large--one-third.post-large--display-table-cell { order: 2; }

.grid__item.post-large--two-thirds.post-large--display-table-cell.medium-down--hide {
    width: 40%;
    display: flex;
    order: 1;
}

这是结果：

Answer 2

试试这个

@media (min-width:992px){ 
    .site-header .grid--full {
        border-bottom: 0;
        width: 66.66%;
        display: flex;
        justify-content: space-between;
    }
    .site-header .grid--full > .grid__item.post-large--one-third {
        order: 2;
        width: 35%;
    }
    .site-header .grid--full > .grid__item.post-large--two-third {
        width: 65%;
    }
    .header-bar .post-large--display-table {
        position: relative;
    }
    .header-bar .post-large--display-table .header-bar__search {
        position: absolute;
        right: 0;
        top: 110px;
        z-index: 1;
    }
    .header-bar .post-large--display-table .header-bar__search .header-bar__search-input {
        border: 1px solid #ddd;
    }
}

如何将此徽标置于 Shopify 主题的中心？

How to center this logo on a Shopify theme?

css

sass

liquid

shopify