将带圆圈的徽标添加到 magento 2 标题答案

【问题标题】：Add Circled logo to magento 2 header将带圆圈的徽标添加到 magento 2 标题
【发布时间】：2017-09-08 12:11:28
【问题描述】：

这是我目前的布局

我需要添加一个圆形的新徽标。 logo div 从 header 块向下溢出并具有更高的堆栈顺序（z 索引）。添加新 logo 后不能更改 header 块的高度。所以新的布局如下：

我知道如何通过在 magento 中创建新模块来编辑标题模板（添加/编辑 css 和 html）。

但是，我需要的是 html 和 css 代码来使徽标溢出，而无需按下整个标题块。这可能吗？

HTML 代码

<header class="page-header">
    <div class="header content">
        <span data-action="toggle-nav" class="action nav-toggle"><span>Toggle Nav</span></span>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 no-pad-left super-logo">
        <div class="main-logo">
            <h1 class="logo">
                <a href="example.com">
                    <img src="https://www.example.com/logo.png" alt="ex" width="1" height="1">
                </a>
            </h1>
        </div>
    </div>

<div class="block block-search col-lg-5 col-lg-offset col-sm-9">
    <div class="block block-title"><strong>Search</strong></div>
    <div class="block block-content">
        .
        .
        .
    </div>
</div>

<ul class="compare wrapper"><li class="item link compare" data-bind="scope: 'compareProducts'" data-role="compare-products-link">
    .
    .
</ul>

<ul class="header links">
....
</ul>

【问题讨论】：

尝试将您的徽标图片作为<div class="main-logo"> 元素的背景图片，而不是<img> 元素，并且图片大小不应影响之后的其他元素。
我试过了。存在同样的问题
是的，你可以用css做到这一点，请执行以下步骤。page-header { position: relative; } .logo { 位置：绝对；顶部：-32px； z-index：1； }
效果很好。正是我想要的

标签： html css magento header

【解决方案1】：

您的建议是使用 z-index 属性的大部分答案。

header { width: 100%; background-color: #660066; color: #ffffff; position: fixed; top: 0; left: 0; z-index: 0 }

.main-logo { border-radius: 50%; background-color: #330033; z-index: 10; position: fixed; top: 5px; left: 5px; }

.action { margin: 1em 0 0.5em 8em }

.block-search { margin: 0 0 0.5em 8em }

<header class="page-header">
    <div class="header content">
        <span data-action="toggle-nav" class="action nav-toggle"><span>Toggle Nav</span></span>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 no-pad-left super-logo">
        <div class="main-logo">
            <h1 class="logo">
                <a href="example.com">
                    <img src="https://www.example.com/logo.png" alt="example" width="1" height="1">
                </a>
            </h1>
        </div>
    </div>

<div class="block block-search col-lg-5 col-lg-offset col-sm-9">
    <div class="block block-title"><strong>Search</strong></div>
    <div class="block block-content">
        .
        .
        .
    </div>
</div>
    </header>

<ul class="compare wrapper"><li class="item link compare" data-bind="scope: 'compareProducts'" data-role="compare-products-link">
    .
    .
</ul>

<ul class="header links">
....
</ul>

【讨论】：