Problem with the LOGO position

[ehcane]

Hello there,

I'm facing another issue here, this time is about the logo position on the website.I want to bring it closer to the "MENU" in the menubar so i added this code in the global.css file around line 13706.

margin-left:130px;

Everything is fine about the way that the logo is displayed until i change the size of the screen and the website becomes responsive.When the screen is getting a lower size the logo is not displayed on the middle anymore.I want to be next to the "MENU" in the menubar ,when the website has a normal size, and centered(in the middle) when the website becomes responsive.

 

Thanks for the help.

P.S.

I will attach some pictures in case you can't understand me.

You can visit my website here: http://www.goexquisite.com

Edited November 13, 2016 by ehcane (see edit history)

[endriu107]

You need to edit bootstrap class because in some screen size there is class col-xs-12 col-sm-12 col-md-12 for logo and menu.

 

Check this: goo.gl/4sgAeT

[ehcane]

Hello,

Thanks for your time, I was trying to find what exactly i should edit but to be honest I'm lost a bit here.Could you please give me a few more details about how to do that?

Thanks for your time!

 

 

Is that in the global.css file?

Edited November 13, 2016 by ehcane (see edit history)

[endriu107]

No, all change you supposed to do in *.tpl file I think this is header.tpl

If you read about bootstrap already (link in previous post) you supposed to know full width = 100% and this is equal for example to col-sm-12.

In header.tpl you have two container:

<div id="header_logo" class="col-lg-2 col-md-2 col-sm-12 col-xs-12 col-sp-12">

and

<div id="header-right" class="col-xs-12 col-sm-12 col-md-12 col-lg-10 clearfix">

 

as you can see for large device (lg) you have in one container col-lg-10 and in another col-lg-2, so 10 + 2 = 12 = 100% = one line, but also you have col-sm-12 and in second container col-sm-12 it means 12 + 12 = 200% = two lines.

 

I think you will now undurstand it.

[ehcane]

Done!

Thanks a lot for your help.I did it in a different way, but everything posible because of you link.Thanks a lot.

I kept the code in the global.css untoched(except the margin-left:130px;) and i added one more line in the responsive.css file like this:

@media (max-width: 1199px) {
  .logo {
  margin: auto;
  max-height: 100px;    =>this one is just to make the logo bigger when the size of the screen is changing.
  max-width: 100px;     =>this one is just to make the logo bigger when the size of the screen is changing.
  }

Now everything works fine. 

 

 

P.S. This is the reason why i love Prestashop , great community , and you always learn new things.