Center logo in between the search and cart with v1.6.1.4

[selectshop.at]

Hi, try this ... opens the global.css (on your FTP file /themnes/yourtheme/css/globao.css) and look for the line 703 this:
 

.col-sm-4, header .row #header_logo {
     width: 33.3333%;
}

You must leave it:

.col-sm-4 {
     width: 33.3333%;
}

And now just then adds this:
 

#header_logo .row header {
     text-align: center;
     width: 100%;
}

This will cause that the container logo take 100% of the width of the header. And to center the image adds this:

#header_logo> to {
     display: inline-block;
}

I hope it helps you.

[ALEXCNX]

Hi there,

 

I have tried to center the site logo in between the search and cart, as explained by Vekia in this thread but to no avail.  I'm using the latest version v1.6.1.4.

 

The "header_logo" div content in header.tpl is different from what's indicated in that thread - see mine below. I am not sure if that's why it isn't working.

<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
</a>
</div>

I'd appreciate any advice if anyone has been successful centering it with the latest version.

 

Thanks

[ALEXCNX]

Thanks for your prompt reply!

 

So centering only with css is possible? I have proceeded as you have indicated but it doesn't center yet. Please see the global.css I have looking at now.

/*
Logo before centering
  .col-sm-4, header .row #header_logo {
    width: 33.33333%; }
*/

/*
Logo after centering
*/

.col-sm-4 {
     width: 33.3333%;
}

#header_logo .row header {
     text-align: center;
     width: 100%;
}

#header_logo> to {
     display: inline-block;
}

Have I missed something?

 

Note that I am not using any template. Just the original prestashop default-bootstrap from a fresh install.

 

Thanks,

Edited March 28, 2016 by ALEXCNX (see edit history)

[selectshop.at]

Smarty Cache and browser cache deleted after the change on file ?

[ALEXCNX]

Yes, both were cleared. 

[selectshop.at]

Try this:

#header_logo .img-responsive { 
display: block;
  max-width: 800px;
  height: auto;
position: relative;
margin-left: 50%;

margin-top: 40px;
margin-bottom: 40px;
 }

@media (max-width: 450px) { /*Change max-width to the maximum mobile screen size*/

#header_logo .img-responsive { 
max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/
}
}

 

@media (max-width: 750px) { /*Change max-width to the maximum mobile screen size*/

#header_logo .img-responsive { 
max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/
}
}

OR

 

you can try to deplace the logo into blockcart.tpl. For this edit file/themes/default-bootstrap/header.tpl

 and remove this code:

<div id="header_logo">
                                    <a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
                                        <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
                                    </a>
                                </div>

by adding it to the file /themes/default-bootstrap/modules/blocksearch/blocksearch-top.tpl
 just below:

<!-- /Block search module TOP -->

 

 

OTHER POSSIBILITY:

 

You can also try this old tip: https://www.prestashop.com/forums/topic/318418-solved-center-logo-in-new-theme-16/

[ALEXCNX]

Actually Vekia's solution as explained here indeed moves the logo to the search block's right. (I did not flush the cache and could not see the change)

 

I sort of centered it in between the search and cart blocks by floating the cart to the left. It's not perfect but good enough.

 

Thanks again!