[SOLVED]My logo overlaps my top horizontal menu.

[nickelus]

Hi guys,

 

As you can see here: www.freshfromthelabs.com my logo is over-lapping my top horizontal menu.

 

This has been driving me mad. I don't see why prestashop doesn't create a default response where it moves everything down, to accomodate the size of the logo.

 

I don't want to make my logo any smaller than it is, and I would also like to make it sit a bit more in the centre, as it's slightly to the right.

 

Can anyone help me with this very annoying problem? How can I get my prestashop to move DOWN a little bit, so that my logo can sit on TOP of the site. Also, is there any way I can move it a little to the left?

 

I can't fathom why there isn't a drag-and-drop solution to this.

 

Any help would be greatly appreciated!

 

Nick

[vekia]

this is not prestashop fault, everything depends on css styles and on template construction. take a look on this picture: http://freshfromthelabs.com/themes/theme531/img/tail-top.gif - this is backgrund image used in your store.

and this is why the blocks don't move down, because there is no blocks. This is image and if you want to make more space in header - you have to edit pic.

[nickelus]

Hi Vekia,

What do you mean edit pic? Could you dumb it down for me a little, as im not the most experinced when

it comes to such issues.

Thanks,

Nick

[MartyW]

Hello Nick

 

The simplest way to get around this is to re-size the picture I have my logo set to a height of 70pixels

 

On your computer find your logo, right click on it and open it in paint and then re-size it

 

Hope this helps

 

Marty

[nickelus]

Hi Marty,

 

Thanks for the response. I understand that this is a 'work-around', but I don't want to make my logo any smaller than it actually is.

 

Is there really no way to make a spacial adjustment to accommodate the size of my logo?

 

Nick

[MartyW]

Hello Nick,

 

Just like Vekia said it will depend on your CSS and template construction

 

I'm new to presta myself so I haven't got around to fully customising a store yet, I'm trying to keep to the default style as much as I can bar colours, grid view and other minor details just so I can get the site up and working asap

 

Good luck

 

Marty

[stottycabanas]

Try post #94 in this thread: http://www.prestashop.com/forums/topic/242732-1541-default-theme-menu-moved-to-right-how-to-fix

[PascalVG]

Try this:

 

themes/theme531/css/global.css, line 432:

 

 

index.php

media="all"

 

 

#slider {

overflow: hidden!important;

height: 403px!important;

border: 7px solid #fff;

-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.1);

-moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.1);

box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.1);

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

margin-top: 70px; <-- add this line, to move the slider down.

}

 

themes/theme531/css/global.css, line 349:

 

 

 

#header_logo {

width: 197px;

height: 62px;

display: block;

position: absolute;

left: 314px; <-- move header to the left, to center-align with slider

top: 73px;}

 

 

Not sure if you want the menu down, but is more complicated. Seems very odd how they somehow did the grid lines...

 

See this first, and give some feedback

My 2 cents,

pascal

[PascalVG]

Oh, here a screenshot of changes above:

[nickelus]

Pascal always to the rescue!

 

I think I haven't explained myself properly, what I meant was, I want to move my logo so it sits ABOVE the bar that says 'still' on the left and has the search box on the right.

 

Whether I can move my logo up ABOVE it, or move that bar down (I think it's the categories bar?) is what I want to know, and how I would be able to do it.

 

Let me know if this makes any sense, and, again, thanks for your help Pascal.

[PascalVG]

Got it!

I saw that Vekia found the background picture (see post #2) (Thanks, Vekia, couldn't find it!)

I changed the picture, to make it 150px higher, and moved the menu lines down. (See attachment)

Then, I changed some menu block and search block. together this gives a nice composition. See pic.

 

Total changes needed:

 

Try this:

 

themes/theme531/css/global.css, line 432:

 

#slider {

overflow: hidden!important;

height: 403px!important;

border: 7px solid #fff;

-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.1);

-moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.1);

box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.1);

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

-ms-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

margin-top: 0px; <-- change this line to 0, (or take it fully out again, just like original)

}

 

 

themes/theme531/css/global.css, line 360:

 

 

.sf-contener {

clear: both;

margin: 151px 0 0 0; <-- moves menu (on the left of logo) down to new menu position

height: 53px;

}

 

themes/theme531/css/global.css, line 617:

 

#search_block_top {

height: 43px;

position: absolute;

right: 0px;

top: 327px; <-- moves search box down to new menu position

}

 

themes/theme531/css/global.css, line 349:

 

#header_logo {

1. width: 197px;
   
2. height: 62px;
   
3. display: block;
   
4. position: absolute;
   
5. left: 314px; <-- moves header to the left, to center-align with slider
   
6. top: 73px;
   

}

 

 

finally, download the file tail-top.gif, and upload it to your server to /themes/theme531/img/tail-top.gif (maybe rename old file that's here already to tail-top_ORIG.gif first)

 

Hope this does the trick,

pascal

Edited August 12, 2013 by PascalVG
changed 150 - 151 for menu repositioning (see edit history)

[nickelus]

Hi Pascal,

 

Quick question, when you say 'download the file ''tail-top.gif'' ' Do you mean the one Vekia linked me to?

 

Sorry if this is a stupid question but I'm not the most experienced!

 

Nick

[PascalVG]

Hi Nick,

No Vekia pointed to the original file (Here you can see where the new file has to go )

I attached a new file in my final solution post (It's VERY small, only 21 pixels wide, so you might have overlooked it. Look on the right of the screenshot, there you'll see a second attachment. (Move your pointer just BELOW the screenshot thumbnail, and move slowly to the right. You will see shortly a hand pointer displayed. That's the 2nd file attachment :-)

You know what, I attach it here once more:

 

Hope this helps,

pascal

[nickelus]

Hi Pascal,

 

I made the suggested edits, yet see no difference on my website.

 

I've attached my edited global.css, do you think you could maybe take a look at it?

 

Thanks,

 

Nickglobal (2).css

[nickelus]

And now it appears something has gone wrong. The logo has moved, but now there's no borders. www.freshfromthelabs.com.

 

Any suggestions guys?

 

Thanks,

 

Nick

[PascalVG]

Nick, you didn't copy the new image to the right place. See PM message.

 

Hi Pascal,

 

I made the suggested edits, yet see no difference on my website.

 

I've attached my edited global.css, do you think you could maybe take a look at it?

 

Thanks,

 

Nickglobal (2).css

 

Refresh the page (CTRL-F5 (windows) / Command-R (Mac))

[PascalVG]

Conclusion: Somehow picture could not be renamed/overwritten. Solved now

[PascalVG]

Hi guys,

 

This has been driving me mad. I don't see why prestashop doesn't create a default response where it moves everything down, to accomodate the size of the logo.

 

 

The theme used is a 3rd party theme, which doesn't support this.

For your info,

pascal