Centering and Enlarging the Logo

[mallrat]

Hi there. I am running Prestashop 1.7.8.6 and am trying to centre the logo, make it larger and have the horizontal menu underneath the logo. I have found various instructions for earlier versions of Prestashop 1.7 and also 1.6 on how to do this but I cannot find anything that works on this version.

I have tried the instructions on the attached thread from a while ago, but it no longer works.

Can anyone offer any advice on this?

Thanks!

[Ress]

Are you using the default theme?

[mallrat]

Hi Ress. Yes, it is the default theme. Sorry I forgot to mention it.

[Ress]

In your_prestashop/themes/classic/templates/_partials/header.tpl

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

<div class="header-top-right col-md-12 col-sm-12 position-static">

Also add this css lines:

#header .header-top > .container > .row:first-of-type {
	flex-wrap: wrap;
}

/*increase logo size */
#header .logo {
    width: 200px;
}

 

Edited June 29, 2022 by Ress (see edit history)

[mallrat]

Many thanks. I could not get this to work at first. But when I tried again it worked perfectly.

I really appreciate your quick solution to this problem.

 

 

[Soha 8084]

On 6/29/2022 at 9:11 AM, Ress said:

In your_prestashop/themes/classic/templates/_partials/header.tpl

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

<div class="header-top-right col-md-12 col-sm-12 position-static">

Also add this css lines:

#header .header-top > .container > .row:first-of-type {
	flex-wrap: wrap;
}

/*increase logo size */
#header .logo {
    width: 200px;
}

Hello

will this code work with v8 ? and where exactly to add the additional css at the tpl before which line?
I tried this and the logo is left but larger and the menu not below it but at left of the logo squeezed top left

any ideas?

 

[carinarochelle]

I would like to bump this, I have the same question as Soha 8084

[Andrei H]

Hi @carinarochelle,

Here is a more simplistic approach, assuming you are using the classic theme, as the OP.

In your themes/classic/assets/css directory, create a file called custom.css

Add the following content to it:

#header .header-top>.container>.row:first-of-type {
    flex-direction: column;
}

#header .logo {
    width: 200px;
}

Refresh the cache.

It should work at this point.