Moving HomeSlider next to Logo

[iverson]

Hi all,

I'm using 1.6 version and I'm struggling to find a solution on how to move the HomeSlider module next to the Logo.

What I simply want is to put the home slider before the TopMenu.

Is there anyone tried this before?

Thanks,

 

[NewAtThis]

Yes, I am also having this problem.  I would like to have my logo on the left and then the slider beside it.  I hope someone can help!

 

I'm using Prestashop 1.6 with the default bootstrap theme (although with modified CSS).

 

My website is at imh.mythatsgood.com

 

Thank you!

Steven.

[NewAtThis]

Just messing around with this some more.  I've got the slider in the header now, but I'm having trouble getting it positioned.  I think it has to do with column widths.  I made the header_logo column smaller such that it pulled the slider closer to the logo, but now it's put both the search bar and the cart under the slider.  That's what it does on my PC.  On my phone, it looks fine.  Thanks.

[NewAtThis]

Ok, it seems like I've gotten what I was looking for, mostly, anyway.

 

You can move the slider module to displayTop section using the Module->Positions tool or Module->Positions->Transplant if you need to.  I put it at the very top of my displayTop section.  That seems to put it immediately after the logo.  Then it's a matter of resizing things to fit appropriately.  I knew nothing about CSS column sizing (and I still don't know much), but there's a great tutorial at http://www.helloerik.com/bootstrap-3-grid-introduction .  So I read about that, and then I went to my global.css file (create a backup first!).

 

Find this section in your global.css file:

 

.col-sm-1 {
    width: 8.33333%; }

  .col-sm-2 {
    width: 16.66667%; }

  .col-sm-3 {
    width: 25%; }

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

 

and change it to this:

 

 

  .col-sm-1 {
    width: 8.33333%; }

  .col-sm-2 {
    width: 16.66667%; }

  .col-sm-3 {
    width: 25%; }

  header .row #header_logo {
    width: 270px; }

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

 

Essentially, I split the ".col-sm-4, header .row #header_logo" line into "header .row #header_logo" and ".col-sm-4".  Then I made the width of #header_logo column slightly larger than my logo, and I adjusted .col-sm-2 and .col-sm-4 until everythink looked right on my screen.  I also adjusted the padding and margin settings of the modules in the header until everything seemed spaced properly.  Oh, I also adjusted the size of the slider module to match the height of the logo, and I adjusted the margin and paddign of the cart and searchbar to center them with the slider.  So this seems to be the solution.  At this point, it looks good on my pc, but needs some tweaking to look right on my phone.  I haven't checked other sizes yet.  But I think this is the right approach.

 

I hope this helps someone!

 

Thanks.

Steven.