Move cart block on modified default theme

[jorge911]

Hi,

 

I have modified the default theme to have the topmenu (actually the advanced top menu) besides de logo and I want now to have the cart block on top of the menu keeping it responsive.

 

I have tried many combinations without success. Anyone can help?

 

Here is the development site, default modified theme, advaced top menu and prestashop 1.6

http://vinarialis.com/dev3/index.php

 

thanks

[sandipchandela]

move cart block to displayTop named hook. 

This advanced menu css forces cart block to put down the page.

Your whole section should be look like as under.

<div class="row">

1) header logo section - id header_logo

2) PMenu - id  adtm_menu

3) Cart Block - class col-sm-4 clearfix

</div>

 

Currently 2) and 3) are out of class .row div section.

 

Do not change the css properties of cart block. It will fit automatically in its place.

[jorge911]

Thanks for the suggestion.

 

The reason why the advanced top menu is forcing the cart block down is because I changed the css for that advance menu to move besides the logo.

 

From your comment I guess then that it will be a better option to initially leave the css of that advanced menu as default and try first to move the id adtm_menu within the class="row" after the header_logo.

 

Currently I don't know how to do it because the advanced top menu is in the displayTop hook but it displays outside the "logo row". I guess that I'll have to look into the tpl to see how I can make the advanced top menu to display inside the "logo row". If anyone knows the solution or can give me some suggestions it will be really wellcomed.

 

Thanks

[jorge911]

ok, I have made some advanced.

 

I moved the cartblock to displatNav but the cart didn't position correctly so I went to the blockcart.tpl in themes and removed the if $blockcart_top that was introducing the col-sm-4 div. (I also tried to set the $blockcart_top to false in blockcart.php under modules but for some reason the col-sm-4 was still there, and I had cache of and forced recompilation of smarty).

 

Then I changed the blockcart.css to remove the padding-top so it aligned.

 

Still an small issue, the slider is far to low. Anyone knows how to move it closer to the logo and the menu?

 

http://vinarialis.com/dev3/index.php

 

thanks

[sandipchandela]

ok, I have made some advanced.

 

I moved the cartblock to displatNav but the cart didn't position correctly so I went to the blockcart.tpl in themes and removed the if $blockcart_top that was introducing the col-sm-4 div. (I also tried to set the $blockcart_top to false in blockcart.php under modules but for some reason the col-sm-4 was still there, and I had cache of and forced recompilation of smarty).

 

Then I changed the blockcart.css to remove the padding-top so it aligned.

 

Still an small issue, the slider is far to low. Anyone knows how to move it closer to the logo and the menu?

 

http://vinarialis.com/dev3/index.php

 

thanks

 

Put this code in global.css 

 

#index header .container { height : 130px; }

[jorge911]

I tried the

#index header .container {height: 130px;}

 

but didn't work. it increases the i height off all elements on header it seems.

 

Playing with firebug and the css I found that I obtain the result that I want by changing "inline" the style for the div with class container which is inside the tag "header" (or inside the class header-container if you prefer).

 

In the css inspector it said that the identifier was:

#header > div:nth-child(3) > div:nth-child(1)

but tried to use that in the global.css and didn't work.

 

I'll try to send a screen capture with the inline change and the correct result just in case it helps.

 

How can I implement this in the global.css file? (I still don't understand complex css )

[sandipchandela]

in header.tpl file open file some text editor.

Find around line no 88 below text coding.

Just add height to 100px or suitable to first div. Last three div's are just for identification.

 

Old

<div>

<div class="container">

<div class="row">

<div id="header_logo">

 

New 

<div style="height :100px;">

<div class="container">

<div class="row">

<div id="header_logo">

[jorge911]

that didn't make the trick either

 

I managed now to move the advanced top menu to the same row of the logo by modifying the corresponding tPl.

 

but there is still too much space between the logo and the slider. I cannot find what css or template is moving the slider down.

 

any suggestions please!

[sandipchandela]

I have checked and found that there is little space between the two sections.