My store logo isn't aligning properly

[TopWebNames]

I made my store logo exactly the same size as the AbanteCart default logo. However, as you can see, it isn't aligning with the top menu bar properly. It's 3 or 4 pixels too low, and showing a white space across the top.

How do I fix this so that it aligns with the top menu bar?

[Basara]

I made my store logo exactly the same size as the AbanteCart default logo. However, as you can see, it isn't aligning with the top menu bar properly. It's 3 or 4 pixels too low, and showing a white space across the top.

How do I fix this so that it aligns with the top menu bar?

Are You sure the size is same?
http://classicteeshirts.com/resources/image/18/6a/1.png     300px × 72px
http://demo.abantecart.com/resources/image/18/73/3.png  271px × 58px

Try to use image with reduced height

[TopWebNames]

I made my store logo exactly the same size as the AbanteCart default logo. However, as you can see, it isn't aligning with the top menu bar properly. It's 3 or 4 pixels too low, and showing a white space across the top.

How do I fix this so that it aligns with the top menu bar?

Are You sure the size is same?
http://classicteeshirts.com/resources/image/18/6a/1.png     300px × 72px
http://demo.abantecart.com/resources/image/18/73/3.png  271px × 58px

Try to use image with reduced height

Yes, the size of my logo is 300 x 72.  And yes, I tried making the height less and less, but the top still stayed white . At 300 x 69 the bottom was in line with the bottom of the menu bar, but the white still shows at the top. What might be causing it to be pushed down, or centered too low, or whatever the problem might be?

[Basara]

Hello.

I think you need modify CSS to avoid white color.
1. Use image with height 72px

2. modify CSS file ..../storefront/view/default_html5/stylesheet/bootstrap.min.css
find about line 9

Code: [Select]

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

change to

Code: [Select]

img {
background-color: #00A0CA;
margin-top: -4px;
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

3. modify responsive css
.../storefront/view/default_html5/stylesheet/style.css about line 3025
find

Code: [Select]

.logo img {
    background-color: #FFFFFF;
    padding: 5px;
}

change to

Code: [Select]

.logo img {
    background-color: #00A0CA;
    padding: 5px;
}

Hope this fix issue. Do Not forget to backup files!!

[TopWebNames]

Thanks Basara. You said it should be on about line 9.

Guess what... EVERYTHING in default_html5/stylesheet/bootstrap.min.css file is on line 9!!

AbanteCart staff: Why is this?

What should I do?

Did I get a corrupt installation zip when I downloaded it a couple of weeks ago?

[Basara]

Thanks Basara. You said it should be on about line 9.

Guess what... EVERYTHING in this file is on line 9!!

Use search to find code.

[TopWebNames]

Thanks Basara. You said it should be on about line 9.

Guess what... EVERYTHING in this file is on line 9!!

Use search to find code.

I did. I always do. There is no "height: 69px;", or even just "69px" by itself, or even anything close.

[Basara]

Hope another user can help You. I am using firebug to locale css code.

[TopWebNames]

Hope another user can help You. I am use firebug to locale css code.

Thanks for your help!  I use Firebug to locate some things, too, but because of how PHP works, Firebug can't... or just doesn't tell you which file(s) something is in. I have another program that I use that will search EVERY file in the full application for a string. I'll let you know what I find.

Amazing... I just ran it, and it didn't find "height: 69px;" in ANY files.  I'll try again with "height: 72px;", what it's supposed to be.

"height: 72px;" is in only one file:  storefront\view\default_html5\stylesheet\style.css

I found this on line 212:
.logo {
   width: 300px;
   background-color: #fff;
   text-align: center;
   height: 72px;
   line-height: 72px

So I changed it from:  text-align: center;
  to: text-align: top;

I thought it might fix it, but it didn't.

I next found this on line 212:
.logo {
   width: 300px;
   background-color: #fff;
   text-align: top;
   height: 72px;
   line-height: 72px

and changed the background-color to: #00A1CB

And the white strip disappeared! The logo is still down too far by 3 pixels, so I'll shave it from 72 to 69 pixels and see what happens.

That FIXED IT!