Logo, search bar, and shopping cart out of alignment after upgrade to 1.6

[madmartian]

In PS 1.5, the logo, the search bar, and the shopping cart were in perfect horizontal alignment. After the upgrade to 1.6, the three items are stair-stepped, creating an awkward look and some wasted whitespace. How do I fix this? You can see the comparison here:

 

 

You can see the latter in action here:

 

http://www.madmartian.com/shop

 

 

[BarryH]

Biggest issue seems to be related to placement of "Sign In | contact | sitemap | bookmark" links top right. I'm just starting to dabble with CSS and don't quite understand how the layout was achieved on the old version with 2 links above cart and 2 links below.

 

However, just playing with your page, deleting the "header_links" element brings the cart block up where it should be. The logo can be adjusted down where it should be by changing the padding around the logo from 15px to 45px (header .row #header_logo { padding-top: 45px;). This doesn't solve the problem of how to get the links where they need to be but it's a couple pieces of the puzzle.

[madmartian]

Thanks for your reply. I was able to fix the problem with the searchbox by editing blocksearch.css and changing line 2 from "padding-top: 50px" to 20px. I made the same change to blockcart.css (line 7). But you are correct about the permanent info block causing the cart block to be even lower.

 

I gave up and removed the permanent block and put the displayNav back. I'll work on shrinking the top and bottom margin so it doesn't bother me so much.

[madmartian]

Well, after a bit of tweaking with the .nav section of global.css without any luck, I gave up on shrinking the top/bottom margins of displayNav and went back to messing with Permanent Links Block and I believe I made it work. So the total changes to the original default theme are:

 

default-bootstrap\css\modules\blocksearch\blocksearch.css:

changed "padding-top: 50px" on line 2 from 50 to 25px

 

default-bootstrap\css\modules\blockcart\blockcart.css

changed "padding-top: 50px" on line 7 from 50px to 0

changed "top: 95px" on line 165 from 95px to 45px (otherwise there's a 50px gap in the dropdown)

 

Edited modules\blockpermanentlinks\blockpermanentlinks-header.tpl

copied in section from User Info Block (for sign in):

<li id="header_link_signin">

   {if $logged}

      <a href="{$link->getPageLink('my-account', true)|escape:'html'}" title="{l s='View my customer account' mod='blockuserinfo'}" class="account" rel="nofollow"><span>{$cookie->customer_firstname} {$cookie->customer_lastname}</span></a>

      <a href="{$link->getPageLink('index', true, NULL, "mylogout")|escape:'html'}" title="{l s='Log me out' mod='blockuserinfo'}" class="logout" rel="nofollow">{l s='Sign out' mod='blockuserinfo'}</a>

   {else}

      <a href="{$link->getPageLink('my-account', true)|escape:'html'}" title="{l s='Log in to your customer account' mod='blockuserinfo'}" class="login" rel="nofollow">{l s='Sign in' mod='blockuserinfo'}</a>

   {/if}

</li>

Removed all blocks from displayNav in Modules/Positions

 

I'll make it perfect by adding 5 pixels of whitespace to the logo image.

Edited January 18, 2015 by madmartian (see edit history)

[skijump]

Afternoon, I just encountered this issue after upgrading from 1.6.0.6 to 1.6.1.7. The logo, search bar, and cart are oddly arranged. I have unhooked and uninstalled the modules in question, used Chrome's inspection to knock out some parts to see the issue, etc.

 

I am unable to line them up correctly as the logo is top left and the others far right on top of each other.

 

After upgrading I had to utilize the  "bring javascript down to footer" to get horizontal bar functionality back.

 

Any ideas????

 

 

*********Update*****Found Solution***********

 

I had module hook issues. I Had the Quick Search and Cart Modules in displayheader and displaytop postions. I unhooked them from displaytop and added them in displaynav. Then just changed their order and everything lined up.

Edited September 23, 2016 by skijump (see edit history)