I want to put logo here: [![enter image description here][1]][1]

Here is code header:

   <?php $welcomeMessage = $block->getWelcome(); ?>
<div class="header-container header-style-20">


    <div class="header-bottom">
    <?php echo $block->getChildHtml('logo_theme'); ?>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4 sidebar-megamenu">
                    <div class="megamenu-content-sidebar">
                        <div class="btn-megamenu">
                            <a href="javascript:void(0)" title="<?php echo __('All Categories') ?>"><?php echo __('All Categories') ?></a>
                        </div>

                        <div class="menu-ver-content">
                            <?php
                            if ($_config->getGeneral('menu_style') == 'megamenu') {
                                echo $block->getChildHtml('navigation-header-megamenu');
                            } else {
                                echo $block->getChildHtml('navigation-header');
                            }
                            ?>
                        </div>
                    </div>

                    <div class="navigation-mobile-container">
                        <?php echo $block->getChildHtml('navigation.mobile'); ?>
                    </div>
                </div>

                <div class="col-lg-9 col-md-12 searchbox-header">
                    <?php echo $block->getChildHtml('search-header-pro'); ?>
                </div>
            </div>
        </div>
    </div>
</div>

Here is code for logo:

<div class="col-lg-3 col-md-3 col-sm-5 logo-header">
                    <?php echo $block->getChildHtml('logo_theme'); ?>
                </div>

CSS:

 .header-middle {
        padding: 36px 0 29px;

        .logo-header {
            .logo-wrapper {
                .logo-content {
                    margin: 0;

                    strong {
                        a {
                            img {
                                vertical-align: top;
                            }
                        }
                    }
                }
            }
        }

Now when I put code logo after <div class="header-bottom">

the logo is displayed but not in one line. [![enter image description here][2]][2]


@update

Changed:

1) <h1 class="logo-content"> to <a class="logo-content">in file logo.phtml

2)

<div class="container">
            <div class="row">
              <?php echo $block->getChildHtml('logo_theme'); ?> <!-- move here -->
                <div class="col-lg-3 col-md-4 sidebar-megamenu">

3)

and now is little best - but it's still not in one line

solved

  • move your logo block to header panel block... <move element="logo" destination="header.panel" before="-" /> – Bhavin Gehlot Dec 7 at 17:09
up vote 1 down vote accepted

You can move the logo into the container row. In addition, I can see that the logo is wrapped in h1 tag which adds a margin at the bottom of it. I would remove it from the logo element. Or change a bit of CSS for it:

.logo-wrapper > h1 {
    margin-bottom: auto; /* if not try adding !important to it */
}

Also, the search bar seems to be a bit long if you want to add logo next to it. Change the class of the searchbar from col-lg-9 to col-lg-7

 <?php $welcomeMessage = $block->getWelcome(); ?>
<div class="header-container header-style-20">


    <div class="header-bottom">
        <div class="container">
            <div class="row">
              <?php echo $block->getChildHtml('logo_theme'); ?> <!-- move here -->
                <div class="col-lg-3 col-md-4 sidebar-megamenu">
                    <div class="megamenu-content-sidebar">
                        <div class="btn-megamenu">
                            <a href="javascript:void(0)" title="<?php echo __('All Categories') ?>"><?php echo __('All Categories') ?></a>
                        </div>

                        <div class="menu-ver-content">
                            <?php
                            if ($_config->getGeneral('menu_style') == 'megamenu') {
                                echo $block->getChildHtml('navigation-header-megamenu');
                            } else {
                                echo $block->getChildHtml('navigation-header');
                            }
                            ?>
                        </div>
                    </div>

                    <div class="navigation-mobile-container">
                        <?php echo $block->getChildHtml('navigation.mobile'); ?>
                    </div>
                </div>

                <div class="col-lg-7 col-md-12 searchbox-header"> <!-- change the class here -->
                    <?php echo $block->getChildHtml('search-header-pro'); ?>
                </div>
            </div>
        </div>
    </div>
</div>

Alternative to the class change, you change the classes flex property to make the searchbox fit. Try this CSS:

.header-bottom .col-lg-9 {
    flex: 0 0 61%; /* might need the !important tag too */
}

Let me know if it helped.

  • Bare I added update to my topic – Sylvester Dec 8 at 12:27
  • Ok perfect. This is the result that I wanted to get! – Sylvester Dec 8 at 12:46
  • Glad it helped :) pozdrawiam ;) – Bare Feet Dec 8 at 15:14

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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