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.

 

[Bronco]

On 7/4/2024 at 11:34 AM, Andrei H said:

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.

 

Thank you for this clever .css 

Is there a way to have the Logo float?  Be bigger and hang down a little?  

[Andrei H]

Hello,

You can change that width: 200px; line to make the logo bigger.

As for moving it down, you can add the 'margin-top' property to it (e.g. margin-top: 5px)

I am not really sure what you mean by 'float', though. Do you want to have text to the right/left of it by using the CSS 'float' property?

[miguellol]

Quote

 

Hello,

You can change that width: 200px; line to make the logo bigger like on the site.

As for moving it down, you can add the 'margin-top' property to it (e.g. margin-top: 5px)

I am not really sure what you mean by 'float', though. Do you want to have text to the right/left of it by using the CSS 'float' property ? 

 

If you want the logo to dangle, you can use 'position: relative;' with 'top' or 'margin-top' to create this effect. This will raise the logo slightly or move it down to make it look like it's 'floating'

Edited Wednesday at 07:55 AM by miguellol (see edit history)

[Bronco]

Thank you for the replay.  So what I mean by floating (overlay might have been a better word)
If you can consider the Christmas ball a Logo it hangs down over the page so if the page is scrolling and the menu is sticky the ball would glide over the content