Jump to content

1.5.4.1 default theme menu moved to right, how to fix?


Recommended Posts

Have you got troubles with your prestashop template after updating to 1.5.4.1 version? There is a quick fix for the "menu on right" issue. For the first, you have to open the themes directory. Open the header.tpl file located in your theme. You've got there something like:

 

 

<div id="header_right" class="grid_6 omega">
{$HOOK_TOP}
</div>

 

all you have to do is to use grid_9 instead the grid_6:

 

 

<div id="header_right" class="grid_9 omega">
{$HOOK_TOP}
</div>

 

http://www.prestashop.com/forums/index.php?/topic/242657-problema-con-top-menu-y-barra-de-busqueda/page__view__findpost__p__1200499

  • Like 1
Link to comment
Share on other sites

if you've got troubles with the logo (white space between the menu and top of the page) you can follow @nadie solution:

 

 

open the file:

 

themes/your_theme/css/global.css

 

look for:

 

#header_logo {
float: left;
display: block;
margin-top: 30px;
}

 

 

change it to:

 

#header_logo {
position: absolute;
top: 30px;
z-index: 1;
}

  • Like 1
Link to comment
Share on other sites

unfortunately this it not the final and universal solution. After this easy correction my webpage became totally blank.

 

can you please paste the url to your website? It's really weird that your page becomes blank, because it's only css fix, no source edition...

 

regards

Link to comment
Share on other sites

Hi!

 

after this fix, my horizontal top menu goes back to center, but my shopping cart from header goes down, below site logo.

 

look here www.alt-air.ro

 

thx!

 

hello, its because your template is modified a bit.

 

here is the solution:

 

open global.css located in your theme, then add/change:

 

#header {height:150px;} and to:

 

#header_right {

position: absolute;

left: 0px;

top: 20px;

}

Link to comment
Share on other sites

hello, its because your template is modified a bit.

 

here is the solution:

 

open global.css located in your theme, then add/change:

 

#header {height:150px;} and to:

 

#header_right {

position: absolute;

left: 0px;

top: 20px;

}

 

many thanks!

 

work fine with this:

 

#header {

height:150px;

}

 

#header_right {

position: relative;

left: 0px;

top: -50px;

}

 

have a nice day!

Link to comment
Share on other sites

Hey, I can't figure out what you exactly expect because page (two links you pasted) looks the same.

 

"O Nas" http://i.imgur.com/kb1kUUZ.png

"Homepage" http://i.imgur.com/Lt7O45s.png

 

 

if you want to move logo down, use the: (for #header_logo)

 

position:absolute;
top:30px;


 

if you want move menu, use the: for (#header_right)

position:absolute;
top:0px;
left:0px;

 

and you need to add height param for the #header

height:160px;[/color]

Link to comment
Share on other sites

I am soory, I did some changes during you see it.

Now it looks much better with this code:

 

#header {position:relative; background: url(../img/hornimenu7.png) no-repeat top}

 

#header_logo {

position: absolute;

top: 30px;

}

 

#header_right {

position:relative;

float: right

}

 

Just one little problem. If I go over the logo by mouse, there used to be the link to main page, but now is lost.

Maybe you know which code I lost?

 

Thank you

Link to comment
Share on other sites

I am soory, I did some changes during you see it.

Now it looks much better with this code:

 

#header {position:relative; background: url(../img/hornimenu7.png) no-repeat top}

 

#header_logo {

position: absolute;

top: 30px;

}

 

#header_right {

position:relative;

float: right

}

 

Just one little problem. If I go over the logo by mouse, there used to be the link to main page, but now is lost.

Maybe you know which code I lost?

 

Thank you

 

it's easy to fix, just add the:

 

z-index: 2;

 

to the #header_logo

 

should help

Link to comment
Share on other sites

My menu won't go under my logo.

 

Where do I need to change this and what is the code?

 

Thanks

 

www.djstore.nl

 

modules/blocktopmenu/css/superfish-modified.css

line ~2:

 

.sf-contener {
clear: both
}

 

add: margin-top: 110px;

 

.sf-contener {
clear: both;
margin-top: 110px;
}

  • Like 1
Link to comment
Share on other sites

modules/blocktopmenu/css/superfish-modified.css

line ~2:

 

.sf-contener {
clear: both
}

 

add: margin-top: 110px;

 

.sf-contener {
clear: both;
margin-top: 110px;
}

 

Super!

You are great!

Thanks very much!

 

Regards

  • Like 1
Link to comment
Share on other sites

Hello,

I found that the updated had changed the blocktopmenu.tpl file.

 

Before it was closing the #header_right div then putting in the top menu.

 

In my opinion this is the correct way to do it.

 

Here is the old file that I have now put into the overrides in my theme:

/THEMENAME/modules/blocktopmenu/blocktopmenu.tpl

 

{if $MENU != ''}
</div>

<!-- Menu -->
<div class="sf-contener clearfix">
<ul class="sf-menu clearfix">
{$MENU}
{if $MENU_SEARCH}
<li class="sf-search noBack" style="float:right">
<form id="searchbox" action="{$link->getPageLink('search')}" method="get">
<p>
<input type="hidden" name="controller" value="search" />
<input type="hidden" value="position" name="orderby"/>
<input type="hidden" value="desc" name="orderway"/>
<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'htmlall':'UTF-8'}{/if}" />
</p>
</form>
</li>
{/if}
</ul>
<div class="sf-right"> </div>

<!--/ Menu -->
{/if}

 

As you can see the files starts with a closing div tag which is closing the #header_right div. Then opens up a new one for the menu.This fixed the error without having to resort to creating new hooks or doing absolution positioning on the menu. Much cleaner code overall.

  • Like 2
Link to comment
Share on other sites

Hi

 

I think i tried all possible combinations and none of them worked Ok.

 

This is the best I could get it, but now my logo is on the far right side:

#header {position:relative}

#header_logo {

position:absolute;

top:30px;

 

}

}

 

}

 

#header_right {

position:relative;

float: right

}

 

Can anybody help with this?

Link to comment
Share on other sites

As you can see the files starts with a closing div tag which is closing the #header_right div. Then opens up a new one for the menu.This fixed the error without having to resort to creating new hooks or doing absolution positioning on the menu. Much cleaner code overall.

 

hey

 

thanks for the info, i will check it once again and test. If it will work - I will put the solution in the first post

 

Hi

I think i tried all possible combinations and none of them worked Ok.

 

hello, please paste the url to your website

Link to comment
Share on other sites

Try adding left:0px; in the global.css file (I annotated the quoted post below with it).

 

Hi

 

I think i tried all possible combinations and none of them worked Ok.

 

This is the best I could get it, but now my logo is on the far right side:

#header {position:relative}

#header_logo {

position:absolute;

top:30px;

left:0px;

}

}

 

}

 

#header_right {

position:relative;

float: right

}

 

Can anybody help with this?

Edited by Rhapsody (see edit history)
Link to comment
Share on other sites

Hi all

 

I can see the photo you posted vekia and it is really strange because I use CCcleaner several times and the problem percists on Chrome,Expolrer and Firefox.

 

BUT using the left:0px; adde to header_logo suggested by rapsody helped.

 

thx

Link to comment
Share on other sites

Is it possible to move logo in the center of the header, maybe changing absolute?

 

hello of course it is possible, but all of this depends on your logo size. If it is possible - please create separate thread for your question

 

regards

Link to comment
Share on other sites

I upgraded from 1.5.4.0 to 1.5.4.1 and I see the same issue: top horizontal menu moved to the right as well as the search bar.

I don't have any customizations on my default template.

 

You can read solution in first post in this thread

  • Like 1
Link to comment
Share on other sites

Yes, thank you. I did. Perfect step by step solution.

 

Thanks for the information that it works for you :-) If you've got any other questions related to this issue - feel free to continue discussion here

 

regards

Link to comment
Share on other sites

it might be the same issue, can you provide an url to your website?

 

In prior default templates (even as late as 1.5.4) the header logo would not overlap...rather it would just push the rest of the page down.

 

(I don't know what in the world is wrong with this (full screen screenshot) image hosted on tinypic but the point is still illustrated even without the whole image loading).

 

 

30ivzv8.jpg

Edited by schnappi (see edit history)
  • Like 1
Link to comment
Share on other sites

hey @schnappi

thanks for your message.

I've got one question: this logo problem appear without any reason? or you changed something?

As you said - this is default tempalte - but also without modifications?

 

It is the default 1.4.5.1 template without modifications. The problem occurred after upgrading from 1.5.4 to 1.5.4.1 (and upgrading the default template as well).

Link to comment
Share on other sites

In prior default templates (even as late as 1.5.4) the header logo would not overlap...rather it would just push the rest of the page down.

 

(I don't know what in the world is wrong with this (full screen screenshot) image hosted on tinypic but the point is still illustrated even without the whole image loading).

 

 

30ivzv8.jpg

 

Try.

 

add padding-top "to"

 

.sf-contener

 

in

 

modules/blocktopmenu/css/superfish-modified.css

 

Sorry for my English.

Link to comment
Share on other sites

It is the default 1.4.5.1 template without modifications. The problem occurred after upgrading from 1.5.4 to 1.5.4.1 (and upgrading the default template as well).

 

here is a similar thread to yours (the same issue - weirdy position of logo after update) http://www.prestashop.com/forums/topic/244712-solved-header-image-issues/page__p__1212570#header_logo&fromsearch=1&?do=findComment&comment=1212570

  • Like 1
Link to comment
Share on other sites

Hello

I was wondering if PrestaShop Superstar would help me.

I am new to this and as you can guess I am having the same problems as everyone else with the top bar and recherche bar going to the right and not centered.

I have looked through what I am supposed to do, but I have no idea where i have to go to change to 6 to a 9.

PLEASE PLEASE HELP ME!

my website is www.moinsde2euros.com

Thanks

Link to comment
Share on other sites

Hello

I was wondering if PrestaShop Superstar would help me.

I am new to this and as you can guess I am having the same problems as everyone else with the top bar and recherche bar going to the right and not centered.

I have looked through what I am supposed to do, but I have no idea where i have to go to change to 6 to a 9.

PLEASE PLEASE HELP ME!

my website is www.moinsde2euros.com

Thanks

 

hello

 

all you have to do is to change the header.tpl file located in your theme directory. If you've got any questions related to this issue - feel free to write

 

regards

Link to comment
Share on other sites

in your prestashop root directory you've got /theme/ dir

open it and if you use default prestashop template - open next directory /default/

 

you've got there header.tpl file - open it in text editor (for example notepad in windows) and search for code that I mentioned in my first post here

Link to comment
Share on other sites

I DID IT!! With a little brain power and with your help, I managed to fix it!!

Thank you very much! :) :)

 

You're welcome :-) Glad to hear that I could help you.

 

www.moinsde2euros.com - i checked your website, but it looks like you've got still issue with logo (to much white space between logo and menu)

Link to comment
Share on other sites

You're welcome :-) Glad to hear that I could help you.

 

www.moinsde2euros.com - i checked your website, but it looks like you've got still issue with logo (to much white space between logo and menu)

 

Yes, I have seen it and I am working on it now. Is the code :

#header_logo {

position: absolute;

top: 30px;

z-index: 1;

}

Link to comment
Share on other sites

You're welcome :-) Glad to hear that I could help you.

 

www.moinsde2euros.com - i checked your website, but it looks like you've got still issue with logo (to much white space between logo and menu)

 

I managed to move the bar up, but it went too far up, under my logo.

How do I bring it down please?

Link to comment
Share on other sites

I saw that everyone was helped. My condition is better after applying the fix. Still things are not perfecr. Please see www.buy0atbrands.com (remove 0)

 

Used solution

 

#header {

height:150px;

}

 

#header_right {

position: relative;

left: 0px;

top: -60px;

}

 

I think still something is missing in my case. Please help if any

r1ldhl.jpg

Link to comment
Share on other sites

unfortunately not. Only if i try to restore to 1.5.4.0 if it works but the page looked exactly like the default template.No modifications in templates or css or any code.I only modified the css after the menu bar problem after the upgrade to 1.5.4.1. I think the cart is hidden below the right menu. This problem appeared after i modified some text in home text editor module and deleting its logo from the BO.

 

I rolledback and fixed this way. Thanx anyways.

Edited by antoniskp (see edit history)
Link to comment
Share on other sites

  • 2 weeks later...

Hi vekia ,i managed to fix the overlapping problem, but now i want to align the header logo just above the search bar,as you can see there is a white space between the two,how do i fix this? my website is www.myzawadi.com

 

here's the header code that i'm currently using

 

#header {position:relative}

#header_logo {

position: left;

top: 30px;

z-index: 1;

}

 

#header_right {

position:relative;

float: right

}

Link to comment
Share on other sites

global.css line ~554

 

add top:-50px to the:

 

#header_right {
position: relative;
float: right;
top: -50px;
}

 

let me know if this is what you expect ;) remember that you can manipulate with top: value, you can increase / decrease it

  • Like 1
Link to comment
Share on other sites

global.css line ~554

 

add top:-50px to the:

 

#header_right {
position: relative;
float: right;
top: -50px;
}

 

let me know if this is what you expect ;) remember that you can manipulate with top: value, you can increase / decrease it

 

thanks!!! worked perfectly :)

Link to comment
Share on other sites

Hi,

I have very limited knowledge on html and css, applied fix with following code

 

#header {position:relative}

#header_logo {

position: absolute;

z-index: 1;

}

 

 

#header_right {

position:relative;

float: right

top:30px;

}

 

 

I am happy with the position of logo without the top 30px margin

yet i tried to add the top 30px on header _right (or even more pixel) trying to push the menu bar downward so it will not overlap with my logo, yet it doesn't move.

 

I don't know what is wrong and any solutions will help.

url: http://novelnovelty.com

Thanks,

Nick

Link to comment
Share on other sites

pls help me

 

My logo get over the search Box....

Can I reduce the logo width.......

I try the logo create in low height and width then uplode....but the logo automatically In big size and get over the search box.....

 

my current global.css code is

#header_logo {

position: absolute;

top: 30px;

z-index: 1;

}

 

#header_right {

position:relative;

float: right

Link to comment
Share on other sites

pls help me

 

My logo get over the search Box....

Can I reduce the logo width.......

I try the logo create in low height and width then uplode....but the logo automatically In big size and get over the search box.....

 

my current global.css code is

#header_logo {

position: absolute;

top: 30px;

z-index: 1;

}

 

#header_right {

position:relative;

float: right

 

 

i want to help you of course :) But please - paste the URL to your store - i will check it and then - give you solution

Link to comment
Share on other sites

hi

i nead some help to . with another problem in contact form page .

 

http://komersus.com/pt/contactenos

e whant it to look like this http://themes.presta.../contactez-nous

 

can somebody help me fix it .

 

thanks

 

 

hello

 

this issue isn't related to this thread. I suppose that problem is a bit different.

I need more informations, this issue appear after update? or witthout any reason?

Link to comment
Share on other sites

Have you got troubles with your prestashop template after updating to 1.5.4.1 version? There is a quick fix for the "menu on right" issue. For the first, you have to open the themes directory. Open the header.tpl file located in your theme. You've got there something like:
{$HOOK_TOP}

all you have to do is to use grid_9 instead the grid_6:

{$HOOK_TOP}

if you've got troubles with the logo (white space between the menu and top of the page) you can follow @nadie solution: open the file: themes/your_theme/css/global.css look for:

 #header_logo { float: left; display: block; margin-top: 30px; } 

change it to:

 #header_logo { position: absolute; top: 30px; z-index: 1; } 

 

I had to change the header_logo position to 0px as it was still partly covering the menu bar after changing its position to grid_9

Edited by deepee (see edit history)
Link to comment
Share on other sites

  • 4 weeks later...

Hello I start a topic about the Horizontal menu and search bar in other board but i found this one to be the right place to post. Can you "one of the moderators" delete that post for I can keep the "horizontal menu bar" issues in the same place ? Thanks.

http://www.prestasho...ch-bar-problem/

 

 

I have a problem in my horizontal menu (shadow and search bar placement)

I try everything but I can not solve this issue.

 

Prestashop 1.5.4.1

http://www.festival-trade.com

Horizontal menu problem:

* Shadow displaced

* Search bar displaced

* Horizontal menu displaced

 

I did remove the shop logo to be sure nothing is forcing the menu to come down.

Please see image for reference.

Your help will be appreciated.

post-224158-0-82401900-1372955584_thumb.png

Edited by festival-trade (see edit history)
Link to comment
Share on other sites

Hi vekia ,

 

Thansk for the solution ...

I have solved one problem but now I have another problem to solve.

 

My current global.css values are set as below but the distance between top horizontal bar and my logo is huge . I have tried many things but nothing is working out,

 

 

 

#header {position:relative}

#header_logo {

float: left;

display: block;

margin-top: 30px;

}

 

#header_right {

position:relative;

float:right

top: -60px;

}

post-364133-0-74658400-1373318115_thumb.png

Link to comment
Share on other sites

you have to change several things

 

first one:

for header_logo use this code:

#header_logo {
position: absolute;
top: 0px;
z-index: 1;
}

 

second:

increase margin top value for:

.sf-contener {
clear: both;
margin-top: 190px;
}

(/modules/blocktopmenu/css/superfish-modified.css)

  • Like 1
Link to comment
Share on other sites

Hi VekiaI

I apply this code to global css

hello, its because your template is modified a bit.

 

here is the solution:

 

open global.css located in your theme, then add/change:

 

#header {height:150px;} and to:

 

#header_right {

position: absolute;

left: 0px;

top: 20px;

}

and the problem is almost fixed

now I have to much empty space between

the logo and the horizontal menu bar.

Can you give me a hint!

thank you

Link to comment
Share on other sites

hi,

my website is http://www.airsoftlipo.com/index.php

and as your see i have a problem with the header logo, how do i change this to it being to the left?

 

this is my code:

 

 

 

/* ************************************************************************************************

HEADER

************************************************************************************************ */

#header {position:relative}

#header_logo {

position: absolute;

top: 0px;

z-index: 1;

}

 

/* ************************************************************************************************

Edited by seow (see edit history)
Link to comment
Share on other sites

Hi VekiaI

I apply this code to global css

hello, its because your template is modified a bit.

 

here is the solution:

 

open global.css located in your theme, then add/change:

 

#header {height:150px;} and to:

 

#header_right {

position: absolute;

left: 0px;

top: 20px;

}

and the problem is almost fixed

now I have to much empty space between

the logo and the horizontal menu bar.

Can you give me a hint!

thank you

 

sure can you give me your website url address?

Link to comment
Share on other sites

×
×
  • Create New...