Jump to content
radek.tuma@seznam.cz

E-shop logo is too small

Recommended Posts


I added to the file theme.css:




@media all and (min-width: 768px) {

  /* logo container */

  #header .col-md-2 {

    height: 162px;

    width: 414px;

  }

  /* logo image */

  #header .logo {

    width: 100%;

    height: auto;

  }

}


Share this post


Link to post
Share on other sites

 

I added to the file theme.css:
@media all and (min-width: 768px) {
  /* logo container */
  #header .col-md-2 {
    height: 162px;
    width: 414px;
  }
  /* logo image */
  #header .logo {
    width: 100%;
    height: auto;
  }
}

 

I don't think this is an elegant solution.

 

I suggest to go to /your_theme/templates/_partials/header.tpl

 

and replace the highlighted numbers:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-3 hidden-sm-down text-xs-left" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-9 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}
 

You can even try to set them to: 4 and 8.

 

 

 

Or you can center your logo into the middle and display menu below.

 

Here's the code:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-12 hidden-sm-down text-xs-center" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-12 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

 

Clear the cache

Don't forget to clear the cache of your eshop after you save the changes. (Advanced parameters > performace > Icon at the top right "Clear Cache". Or simply turn off whole cache during the development - recommended).

  • Like 7

Share this post


Link to post
Share on other sites

Thanks Andrej

A good solution, still a work to optimise the space in the right side of the logo (Empty) and some workshop to create a marge between the logo and the horizontal menu (In below)

 

Thanks again

Share this post


Link to post
Share on other sites

 Hello Again :-)

 

I would like to move the search box (2) in order to align it with the logo and create a margin above the horizontal menu (1) as shown in the attached photo... any idea please

 

Thanks in advance

 

post-953079-0-15872800-1485275504_thumb.jpg

Share this post


Link to post
Share on other sites

 Hello Again :-)

 

I would like to move the search box (2) in order to align it with the logo and create a margin above the horizontal menu (1) as shown in the attached photo... any idea please

 

Thanks in advance

 

It's a great idea, I will work on it within the next 14 days and let you know here.

 

Right now I don't have an easy solution for that.

  • Like 1

Share this post


Link to post
Share on other sites

Hay alguna manera de modificar el tamaño de letra del menu horizontal? ya que encontré algo pero modifica el tamaño de la fuente en toda la pagina, yo solo quiero modificar el tamaño de letra en el menú.

 

Saludos

Share this post


Link to post
Share on other sites

Guys awesome, in some cases the logo on top middle looks so much better. I was wondering how to get the logo on the left and the search box on the right, lined up with the bottom of the logo so it looks asymmetrical.

 

header.gif

 

Thanks in advance!

Share this post


Link to post
Share on other sites

It's a great idea, I will work on it within the next 14 days and let you know here.

 

Right now I don't have an easy solution for that.

 

It's a great idea, I will work on it within the next 14 days and let you know here.

 

Right now I don't have an easy solution for that.

Hello Andrej

Did you find a way to align logo with search box... I would like to have more space for the top menu (As in the attached img) ... thanks for your support dear.

post-953079-0-92310600-1488187080_thumb.png

Share this post


Link to post
Share on other sites

To display your logo on the left, the search bar on the right, the menu below

 

1. STEP

Go to your back office > Design tab > Positions

Find "displayTop" hook and set "Search bar" as the first module in this hook (before the main menu) (screenshot)

 

2. STEP

Go to:

/your_theme/modules/ps_mainmenu/ps_mainmenu.tpl

 

Add the red bold code and edit the orange bold code 

 

 

 

....
{/foreach}
</ul>
{/if}
{/function}

<div class="clearfix"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 position-static">
<div class="row">


<div class="menu col-lg-12 col-md-12 js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
{menu nodes=$menu.children}
<div class="clearfix"></div>
</div>

 

 

3. STEP

Clear the cache of your eshop :) Enjoy! (screenshot with the result)

post-48475-0-28991700-1493806837_thumb.png

post-48475-0-00685800-1493806993_thumb.png

Share this post


Link to post
Share on other sites

its works many thanks for your big help

can i ask something now i want the logo in center 

please tell me how i do that

:rolleyes:  :rolleyes:  :rolleyes:  :rolleyes:  :rolleyes:

Share this post


Link to post
Share on other sites

its works many thanks for your big help

can i ask something now i want the logo in center 

please tell me how i do that

:rolleyes:  :rolleyes:  :rolleyes:  :rolleyes:  :rolleyes:

You mean the logo in the center and the search on the right, the menu below. Correct?

Edited by Andrej Stas

Share this post


Link to post
Share on other sites

yes yes  :D  :D  :D  :D

 

Ok, once it is on Presta Theme Maker, I will share the solution here as well :)

Share this post


Link to post
Share on other sites

Hi!

 

just a bump for this topic.

 

I have tried above solutions, but unfortunately it doesnt works ( the code already was the same, i just move the "container" rule which was extra and not listed above)

 

My logo is still on the left.

Using 1.7.2.

 

any idea how to get logo in the middle and line out the search bar on the same height?

Or maybe even the logo in the middle with the horizontal top menu (with categories) left and right from it, and search bar on the right? 

( like this :    cat1   cat2  cat3 LOGO  cat4    cat5   cat6    SEARCH )

 

thanx!

Edited by loetje88
  • Like 1

Share this post


Link to post
Share on other sites

It's a great idea, I will work on it within the next 14 days and let you know here.

 

Right now I don't have an easy solution for that.

 

hello i have tried to center logo following your instrucctions but didnt work out even when i delete cache...pls help

Share this post


Link to post
Share on other sites

I don't think this is an elegant solution.

 

I suggest to go to /your_theme/templates/_partials/header.tpl

 

and replace the highlighted numbers:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-3 hidden-sm-down text-xs-left" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-9 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}
 

You can even try to set them to: 4 and 8.

 

 

 

Or you can center your logo into the middle and display menu below.

 

Here's the code:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-12 hidden-sm-down text-xs-center" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-12 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

 

Clear the cache

Don't forget to clear the cache of your eshop after you save the changes. (Advanced parameters > performace > Icon at the top right "Clear Cache". Or simply turn off whole cache during the development - recommended).

 

You are a true legend, sir. The centered logo on top of the menu is so beautiful. Thank you so much.

Share this post


Link to post
Share on other sites
En 1/23/2017 a las 1:32 PM, Andrej Stas dijo:

I don't think this is an elegant solution.

 

I suggest to go to /your_theme/templates/_partials/header.tpl

 

and replace the highlighted numbers:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-3 hidden-sm-down text-xs-left" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-9 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}
 

You can even try to set them to: 4 and 8.

 

 

 

Or you can center your logo into the middle and display menu below.

 

Here's the code:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-12 hidden-sm-down text-xs-center" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-12 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

 

Clear the cache

Don't forget to clear the cache of your eshop after you save the changes. (Advanced parameters > performace > Icon at the top right "Clear Cache". Or simply turn off whole cache during the development - recommended).

Thanks for your help, I wanted center the logo and with your code it is perfect for PC versión, but I have a little problem in mobile version the logo is not centered .

Can you help me to center logo in mobile version?

 

Thanks

Share this post


Link to post
Share on other sites

Bump, 

 

Centered logo in mobile version

 

thanks

Share this post


Link to post
Share on other sites
On 03/05/2017 at 7:27 AM, Andrej Stas said:

To display your logo on the left, the search bar on the right, the menu below

 

1. STEP

Go to your back office > Design tab > Positions

Find "displayTop" hook and set "Search bar" as the first module in this hook (before the main menu) (screenshot)

 

2. STEP

Go to:

/your_theme/modules/ps_mainmenu/ps_mainmenu.tpl

 

Add the red bold code and edit the orange bold code 

 

 

 

....
{/foreach}
</ul>
{/if}
{/function}

<div class="clearfix"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 position-static">
<div class="row">


<div class="menu col-lg-12 col-md-12 js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
{menu nodes=$menu.children}
<div class="clearfix"></div>
</div>

 

 

3. STEP

Clear the cache of your eshop :) Enjoy! (screenshot with the result)

post-48475-0-28991700-1493806837_thumb.png

post-48475-0-00685800-1493806993_thumb.png

 

Hi Friend

 

I tried make this modification. but dont work for me 

Can you help me? I need put mainmenu below logo picture.

 

My website: www.dhframes.com.br/loja 

 

 

 

Share this post


Link to post
Share on other sites
En 23/1/2017 a las 2:32 PM, Andrej Stas dijo:

I don't think this is an elegant solution.

 

I suggest to go to /your_theme/templates/_partials/header.tpl

 

and replace the highlighted numbers:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-3 hidden-sm-down text-xs-left" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-9 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}
 

You can even try to set them to: 4 and 8.

 

 

 

Or you can center your logo into the middle and display menu below.

 

Here's the code:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-12 hidden-sm-down text-xs-center" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-12 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

 

Clear the cache

Don't forget to clear the cache of your eshop after you save the changes. (Advanced parameters > performace > Icon at the top right "Clear Cache". Or simply turn off whole cache during the development - recommended).

Hi,

I used your method to center the logo, and now it is working without problems, but when go to checkout the logo go to the left and now it is very small.

I have tryed solved it with the file themes/classic/templates/checkout/_partials/header.tpl, I have modified these lines

                    <div class="col-md-12 hidden-sm-down text-xs-center" id="_desktop_logo">

                   Now the logo is center, but it is very small, what can I Do to have the same size of logo of previus page

Thanks

 

 

Edited by macu

Share this post


Link to post
Share on other sites

{block name='header_nav'}
  <nav class="header-nav">
    <div class="container">

          <div class="hidden-lg-up text-xs-center mobile"> 
            <button class="btn canvas-menu float-xs-left" data-toggle="offcanvas" type="button"><span class="material-icons">dehaze</span>
            </button> 
          </div>
          <div class="float-xs-left">
            {hook h='displayNav1'}
          </div>
          {if class_exists('PtsthemePanel')}
            <div class="float-xs-right">
              {plugin module='ps_searchbar' hook='displayTop'}
            </div>    
          {/if}
          <div class="float-xs-right right-nav">
              {hook h='displayNav2'}
          </div>
    </div>
  </nav>
{/block}
{block name='header_top'}
  <div class="header-top">
    <div class="container">
      <div class="float-xs-left">
        <div class="{if Configuration::get('PTS_CP_LOGOTYPE') == 'logo-theme'}logo-theme{else}logo-store{/if}">
          <a href="{$urls.base_url}" title="{$shop.name}">
            <img class="logo img-responsive" src="{$shop.logo}" {if Configuration::get('PTS_CP_LOGOTYPE') == 'logo-theme'}hidden{/if} alt="{$shop.name}">
          </a>
        </div>
      </div>
      <div class="position-static float-xs-right">
          {hook h='displayTop'}
          <div class="clearfix"></div>
      </div>
        <div id="_desktop_menu" class="ps-desktop-megamenu">
            {hook h="displayMainmenu"}
        </div> 
    </div>
  </div> 
  {hook h='displayNavFullWidth'}
{/block}
 

 

 

how i change logo and search bar option?

 

Share this post


Link to post
Share on other sites

When I change the file nothing happens.  I check the source and nothing has changed.  I cleared cache and rebooted my server no change.  I did the CSS width change and that takes effect.  What in the world is going on?

*edit*
Had to change the template recompile options in performance options.

Edited by naps1saps

Share this post


Link to post
Share on other sites
On 5/9/2017 at 7:06 AM, Andrej Stas said:

 

Ok, once it is on Presta Theme Maker, I will share the solution here as well :)

thank you Andrej great job

Share this post


Link to post
Share on other sites

I had to use 7 and 5. I find this version's classic theme doesn't look as nice and not as easy to use. Bummer. Thank You

Share this post


Link to post
Share on other sites
En 23/1/2017 a las 2:32 PM, Andrej Stas dijo:

I don't think this is an elegant solution.

 

I suggest to go to /your_theme/templates/_partials/header.tpl

 

and replace the highlighted numbers:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-3 hidden-sm-down text-xs-left" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-9 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}
 

You can even try to set them to: 4 and 8.

 

 

 

Or you can center your logo into the middle and display menu below.

 

Here's the code:

 

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-12 hidden-sm-down text-xs-center" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>
        <div class="col-md-12 col-sm-12 position-static">
          <div class="row">
            {hook h='displayTop'}
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <div id="mobile_top_menu_wrapper" class="row hidden-md-up" style="display:none;">
        <div class="js-top-menu mobile" id="_mobile_top_menu"></div>
        <div class="js-top-menu-bottom">
          <div id="_mobile_currency_selector"></div>
          <div id="_mobile_language_selector"></div>
          <div id="_mobile_contact_link"></div>
        </div>
      </div>
    </div>
  </div>
  {hook h='displayNavFullWidth'}
{/block}

 

Clear the cache

Don't forget to clear the cache of your eshop after you save the changes. (Advanced parameters > performace > Icon at the top right "Clear Cache". Or simply turn off whole cache during the development - recommended).

Thank you.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More