Overlapping issue for PNG logo (latest PrestaShop build)

[sev7en2507]

Hi to everyone,

I am just working around my first PrestaShop site and I found a big problem. As you can see from the picture below:

 

 

the correctly managed PNG logo file comes ahead the layout... and I can't sort it out. How should I do to move it up?

 

 

Thanks and have a nice day,

[Carolina Custom Designs]

Can you give us a link to your site? If so, we can probably solve it for you.

 

Marty Shue

[sev7en2507]

Hi Marty! Thanks for getting me back sooner. Sure, it's over at: www.arcadebazar.com/bazar

[Carolina Custom Designs]

Thanks. I think you can fix this with just two changes.

 

In global.css at line 548 change to

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

 

then in /modules/blocktopmenu/css/superfish-modified.css at line 70 change to

 

.sf-menu {
   float: left;
   margin: 11em 0 1em;
}

 

That should fix it for you.

 

Marty Shue

[vekia]

i tried to to fix it but now, after changes it looks a bit weirdy, huge white gap in my opinion looks bad

 

[Carolina Custom Designs]

i tried to to fix it but now, after changes it looks a bit weirdy, huge white gap in my opinion looks bad

 

 

Certainly not ideal but with the style logo sev7en2507 has you are limited in options. S/he might want to consider making the logo a little bit smaller. This, in turn, will reduce the amount of white space.

 

I tried to offer the simplest/quickest solution. I could make it look much better but that would probably fall under a paying job

 

Marty Shue

[vekia]

check this thread: http://www.prestasho..._1#entry1265891

 

maybe something like there, looking awesome

 

logo in the left column + little modifications of the header

[Carolina Custom Designs]

logo in the left column + little modifications of the header

 

The solution looks fine (though I prefer having the logo in the header). However, the modifications needed to make that work will probably prove too much for someone that doesn't know much about PS.

 

Perhaps something like this would work:

[edit: my image got removed]

 

Marty Shue

Edited June 18, 2013 by Carolina Custom Designs (see edit history)

[sev7en2507]

What a support! Hi to everyone, please let me say: it's awesome!!! Thanks for all your replies, sincerely this community is the place where I should be ^^

 

Testing now... cheers!

[sev7en2507]

Thanks. I think you can fix this with just two changes. In global.css at line 548 change to

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

then in /modules/blocktopmenu/css/superfish-modified.css at line 70 change to

 .sf-menu { float: left; margin: 11em 0 1em; } 

That should fix it for you. Marty Shue

Hi Marty,

I can't find the blocktopmenu folder on default theme directories.

Thanks for your great support!

 

#EDIT: Please look at the picture. I applied the first change about the global style sheet and I tought... the effect looks interesting but I would like to move the menu as the arrow. In that way I can keep the logo ahead over the template breakline.

How can I do?

 

 

 

Another question: how do I do to refresh the template? I can't find the related option.

Edited June 19, 2013 by sev7en2507 (see edit history)

[Carolina Custom Designs]

Hi Marty,

I can't find the blocktopmenu folder on default theme directories.

Thanks for your great support!

 

#EDIT: Please look at the picture. I applied the first change about the global style sheet and I tought... the effect looks interesting but I would like to move the menu as the arrow. In that way I can keep the logo ahead over the template breakline.

How can I do?

 

As I mentioned, blocktopmenu is in your 'modules' folder. The path will be /modules/blocktopmenu/css/superfish-modified.css. Once you apply the change to this file the menu will be moved down below your logo.

 

Hope that helps!

 

Marty Shue

[sev7en2507]

Hi Marty,

thanks but as you can see I have not this folder...

 

[vekia]

are you sure that you checking the /modules/ directory located in your PRESTASHOP directory?

im asking, because i see there weirdy directories like /misc/ or other, which aren't related to the prestashop

[Carolina Custom Designs]

I agree with vekia. You will need to check for the /modules folder in your PrestaShop installation. Clearly what you posted is not the PrestaShop installation.

 

From the link you posted earlier your PS installation is in the directory named 'bazar'. Look in there please.

 

Marty Shue

 

 

Edited June 20, 2013 by Carolina Custom Designs (see edit history)

[sev7en2507]

Vekia, Carolina thanks to both! Yes, wrong folder and now found the right now!.

 

 

Just applying the suggested changes... thanks for now and have a wonderful day!

[sev7en2507]

Please take a look to this:

 

 

I applied the suggests but I would like to keep the logo ontop of the gray menu bar, just to move as the previous picture the menu below. Can I do that?

[vekia]

btw. you menu backgrund disappear, why?

[sev7en2507]

I only applied the css changes, here's the full CSS (thanks):

 

/*** 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 {

float: left;

margin: 11em 0 1em;

}

.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;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

 

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:34px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/

color: #fff;

white-space:nowrap;

}

.sf-menu li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu li li li {

background: rgba(113, 113, 113, 0.9);

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: #4E4E4E;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #4e4e4e;

outline: 0;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator { /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

 

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

 

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-bottom-left-radius: 17px;

-moz-border-top-right-radius: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

background: inherit;

float: right;

line-height: 25px;

}

li.sf-search input {

-moz-border-radius: 0 5px 5px 0;

padding: 3px 0;

padding-left: 20px;

margin: 6px 6px 0 0;

background: #fff url('../img/search.gif') no-repeat left center;

border:1px solid #777

}

 

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#726f72 !IE;

}