[SOLVED] Logo Overlapping Header after 1.5.6.1 Upgrade

[judy_t_judy]

Hi

 

I need help fixing my header on my prestashop.I upgraded to 1.5.6.1 and now my logo is overlapping my header.I do not have any web design experience nor am i familiar with css.Please can someone help me fix this problem.

 

Thanks

 

Site Screenshot.doc

[Paulito]

Good morning

 

You could try adding this: margin-top: 50px; to superfish-modifified.css

 

See below

 

Result:

 

http://screencast.com/t/XEl2r9z9

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

  margin-right: 14px;

  float: right;

  width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

margin-top: 50px;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

border-right: 1px solid #777;

}

[vekia]

hello

 

can you share url to your website?

i can't open this doc due to the fact that i haven't got office packet.

[judy_t_judy]

Hi

 

My website is www.atasteofafrica.net

[judy_t_judy]

Hi Paulito.Thank you for the advise but i have no idea how to make the changes.I am not a web designer i am just using the template to do the website but i have never used coding so i dont even know where to go to make the changes.

[vekia]

in this case it's necessary to modify files: http://atasteofafrica.net/modules/blocktopmenu/css/superfish-modified.css

add margin-top: 50px; to .sf-menu exactly as paul suggested.

 

 

if you don't know how to edit these files, i've got another solution. use html box free module.

install it and in the right hand side block add this code:

<style>
.sf-menu {margin-top:50px!important;}
</style>

effect:

[judy_t_judy]

OMG Vekia.Thank you so much.I just fixed it .And it was soo easy to use .Is this something i can use to change the color for my tabs.I dont like the grey color on my tabs .I want to change it from grey to a dark brown.

[vekia]

hello

 

i marked this topic as solved.

if you need any additonal help not related to main case in this topic - please create new threads

thanks in advance,

with regards,

Milos

[rasfonseca]

 

Good morning

 

You could try adding this: margin-top: 50px; to superfish-modifified.css

 

See below

 

Result:

 

http://screencast.com/t/XEl2r9z9

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

  margin-right: 14px;

  float: right;

  width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0;

width:980px;/* 980 */

background: #383838;

margin-top: 50px;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

border-right: 1px solid #777;

}

 

Hi Vekia,

 

how and what files do I have to edit to have my top menu, logo just like yours? I another words. whem I include the my logo, everything falls below it. I have tried modifying the global.css and just edit the margin-top: 50px as you said above and it is fine for me. I want the Contact, Site Map, user login to be lined up next to the logo, not below it.

 

Please help.

 

thank you,

Rolando. 

[vekia]

Hi Vekia,

 

how and what files do I have to edit to have my top menu, logo just like yours? I another words. whem I include the my logo, everything falls below it. I have tried modifying the global.css and just edit the margin-top: 50px as you said above and it is fine for me. I want the Contact, Site Map, user login to be lined up next to the logo, not below it.

 

Please help.

 

thank you,

Rolando. 

 

can you share url to your website please?

[moniza66]

Hi, I just updated my cart to version 1.5.6.2 and I had to down size my logo just to make everything work, but, I don't like it so here is my problem, I've followed and tried every tread in the forum and nothing seams to work, at the most I was able to bring my logo from the front overlapping the menu bar to the back, menu overlapping logo, now... everybody is taking about "just go to blocktopmenu and change this and that but problem here is there is no such block on this version so I have resorted to reducing the size of my logo for now until I can get a fix.

 

This shouldn't be a nightmare for everybody, it should be part of the upgrade, easy as ok "upload your logo and choose the size" in the theme section, maybe an official update from Presta Shop perhaps but this is long over due.

 

I've replaced some of the code on global.css but it didn't do a thing, I'll paste what it looks like now here:

 

#header {
height:150px;
}

#header_logo {

 position: absolute;

 top: 30px;
 
 left:0px;
 
 z-index: 2;
 
 }
}
}

#header_right {

 position:relative;
 
 float: right
 
 }

 

 

My website is www.SpyShopOne.net/prestashop

 

Any help would be appreciated, Thank!

Monica

[vekia]

... and where the problem is? with this huge gap between logo and menu?