E-shop logo is too small

[email protected] · January 17, 2017

I put a company logo with dimensions of 414 x 162px . But e-shop logo is too small.

gabdara · January 18, 2017

Have a look at a similar discussion:

https://www.prestashop.com/forums/topic/589289-logo-size-in-prestashop-17

[email protected] · January 20, 2017

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;

}

Andrej Stas · January 23, 2017

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'}

</a>

</div>

{hook h='displayTop'}

</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'}

</a>

</div>

{hook h='displayTop'}

</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).

Bassel · January 24, 2017

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

Bassel · January 24, 2017

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

Andrej Stas · January 29, 2017

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.

Lehandro · January 30, 2017

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

tivicrdotcom · February 4, 2017

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.

Thanks in advance!

Bassel · February 27, 2017

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.

salpicom · February 28, 2017

after that i loose shoping cart and currency

can you help me please

Andrej Stas · May 3, 2017

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)

salpicom · May 4, 2017

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

Andrej Stas · May 5, 2017

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

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

Edited May 5, 2017 by Andrej Stas (see edit history)

salpicom · May 7, 2017

yes yes

Andrej Stas · May 9, 2017

yes yes

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

Loe- · August 17, 2017

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 August 17, 2017 by loetje88 (see edit history)

jrok · September 10, 2017

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

marcodelgallego · October 10, 2017

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.

macu · January 2, 2018

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

macu · January 24, 2018

Bump,

Centered logo in mobile version

thanks

dinizhobby · January 27, 2018

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)

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

macu · February 4, 2018

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

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 February 4, 2018 by macu (see edit history)

Ruup · February 15, 2018

Thanks for the advice.

I have one question: How do i center the top menu?

The url is: goedkoopgrind.nl.

AltanOzkan · October 13, 2018

Thanks. What we can for mobile logo ?

soumen · October 20, 2018

{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?

naps1saps · November 18, 2018

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 November 18, 2018 by naps1saps (see edit history)

tosal · March 26, 2019

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

jennybikes · April 11, 2019

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

lunaroja · April 13, 2019

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.

YZQ · October 26, 2019

On 1/23/2017 at 9:32 PM, Andrej Stas said:

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 Guys, I need some help here.

I followed and changed the values to 3,9 or 4,8 however both doesnt work well for me, the image attached is when i set values to 3,9. Is there any solutions for it? Thank you.

Nadir Filigree · October 6, 2022

Hi there,

Can anyone please point me in the direction as to where to change CSS so that my logo aligns on top on the desktop site?

(if I align the logo image to the top, then the name on the logo, and the menu would be visualy aligned, which is what I am aiming at with this...)

I am using PS 1.7.8 and the default theme, I know where the CSS is, but I see too many "logo" on css to know which one to change (and how)... something as a valign="top" maybe? (but where?)

Thank you so much!

Ana

ComGrafPL · October 7, 2022

Share the url.

E-shop logo is too small

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in