0

I want to move LOGO of site to center and want to add some text on the place of logo. I am able to add text from file but logo is not moving to center of container.

  • I have extended LUMA theme.
  • Screen Shot is attached as what i want achieve

enter image description here

2 Answers 2

0

You could do it modifying element style; try to change .logo style (margin: -8px auto 25px 30%; instead of margin: -8px auto 25px 0;), for example.

In this case, you have to hook your text block in another block, different from logo.

8
  • it would not work.
    – Jarnail S
    Dec 16, 2016 at 10:32
  • I tried it and it works fine.
    – WaPoNe
    Dec 16, 2016 at 10:34
  • This is not a proper way to movo logo to center and Add static block in left side. I am looking to use of standard magento way
    – Jarnail S
    Dec 16, 2016 at 10:39
  • 1
    Logo element is in header.container block, correctly. In there, you have two inline elements (nav-toggle and logo) and two block elements (minicart-wrapper and block-seearch); thier positions are decided by style only. My advice is Magento complient.
    – WaPoNe
    Dec 16, 2016 at 10:52
  • If i do this, then I can display text on left side of logo? 1st: "Some Text", 2nd: Logo, 3rd: Search-box.
    – Jarnail S
    Dec 16, 2016 at 11:40
0

You can try achieve this by following code.

app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

<container name="header.main" htmlTag="header" htmlClass="header-main">
    <container name="header.main.container" htmlTag="div" htmlClass="container">
        <container name="header.main.row" htmlTag="div" htmlClass="row vcenter">
            <container name="header.main.social" htmlTag="div" htmlClass="col-md-3 col-sm-3 hidden-xs header-social" before="-">
                <block name="header.social" class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/header/social.phtml"/>
            </container>
            <container name="header.main.logo" htmlTag="div" htmlClass="col-md-6 col-sm-6 col-xs-10 header-logo">
                <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
                    <arguments>
                        <argument name="logo_img_width" xsi:type="number">499</argument>
                        <argument name="logo_img_height" xsi:type="number">57</argument>
                    </arguments>
                </block>
            </container>
            <container name="header.main.search" htmlTag="div" htmlClass="col-md-3 col-sm-3 header-search hidden-xs" after="-">
                <block class="Magento\Framework\View\Element\Template" template="Magento_Search::form.mini.phtml" />
            </container>
        </container>
    </container>
</container>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.