[SOLVED] Trying to move the top menu bar, and logo image

[rustyclockwork]

Hello all,

 

I'm trying to move the top menu bar and my logo so that my new prestashop installation looks like my old Oscommerce site that I'm replacing.

 

The problem I'm having is moving the top menu bar down so that the top edge of the menu bar is at the bottom of the logo.

 

I've included screenshots of my current (and refined) Oscommerce site and the incompleted Prestashop site as screenshots.

 

Thank you,

 

Jason

Edited August 28, 2013 by vekia (see edit history)

[tdr170]

For the menu bar you will need to edit the superfish-modified.css file and add margin-top as I have shown below.

modules/blocktopmenu/css/superfish-modified.css

(add this, 30px is just an example you will need to change # to your needs)

starts at line 70

 

.sf-menu {

float: left;

margin-bottom: 1em;

margin-top:30px

}

[rustyclockwork]

Hi, thank you... I did all that like you said, but removed my code and used yours... The logo seems to want to "follow" the menu bar... All I need the logo to do is stay in the upper left-hand corner, but I still want the margins to match should the web site be viewed on a wide screen... example: I do not want the logo to go outside of the side margins, having the logo waaaay off in the upper left hand corner of the screen, just the upper left-hand corner to the margins of the web page... if that makes any sense.

 

Does anyone know why the logo seems to be moving down with my menu bar?

 

Thank you again,

 

Jason

[tdr170]

Can you post a link to the site and make sure its not in maintenance mode, also please make sure CCC is not enabled.

Strange as I just tested on a 1.5.4 site and the logo did not move after adding the margin-top, check Modules, Positions, Top of Pages and make sure the Menu is at the bottom of the list.

[rustyclockwork]

http://www.oldfoundry.com/testcart/prestashop/

 

I really appreciate the help, thank you again,

 

Jason

[stottycabanas]

Looks like you've tried to make the logo part of the header background in your global.css rather than use a normal logo image.

 

Try reversing that and setting the top margin for the logo to 10px or even 0 in global.css. You may also need to do the kind of adjustment in post #2.

[rustyclockwork]

Hello, yes the logo kept placing itself in front of the background image, so I got rid of that. I wish this wasn't so complicated, it's just an image for pete's sake! :-) So you are suggesting to lose the background image, and use the logo again, and adjust that, correct?

 

Thank you,

 

Jason

Edited August 28, 2013 by rustyclockwork (see edit history)

[rustyclockwork]

This is what I have currently, no changes to it since I posted the question, should I change this?

 

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

HEADER

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

#header {position:relative; background: url(../img/store_entrance.gif) no-repeat left center; background-size: 694px 150px}

#header_logo {

position: absolute;

top:30px;

z-index: 1;

}

 

#header_right {

position:relative;

float: right

}

Edited August 28, 2013 by rustyclockwork (see edit history)

[stottycabanas]

OK, here are my suggestions, which don't involve reverting to a separate logo image:

• In superfish-modified.css, look for .sf-menu and change margin-top to 50px
  
• In global.css, look for #header and where you're using store_entrance.gif in your background, change left center to left top
  
• In blockpermanentlinks.css look for ul#header_links and include float:right;
  

Net effect should be as per attached:

 

 

Hope that's what you're after.

[rustyclockwork]

You did it!

 

Thank you everyone for all of your help and suggestions!

 

Jason

[vekia]

thanks for information that your issue is solved

im going to mark this thread as [solved]

if you will have any other questions related to this case - feel free to continue discussion here

 

best regards