Magento CE 1.9.1 – Moving Header Account Dropdown

headertemplate

I'm working on some fairly minor changes to the default rwd 1.9.1 theme.

I've created my own package and theme, and modified header.phtml by copy and pasting in order to move Search, Account and Cart into the top nav bar (ie the header-language-container.) So far so good!

As I've moved the buttons around my layout around by editing the controlling CSS, I've noticed that while the mini cart will follow along wherever the cart button goes, the account dropdown stays resolutely put.

I've compared the css positioning of #header-cart.skip-active and #header-account.skip-active and cannot find any glaring difference. What is controlling the position of this menu?

Current appearance of Account dropdown menu

#header-account.skip-active {
    @include menu;
    display: block;
    position: absolute;
    z-index: 200;
    top: 40px;
    right: 115px;
    width: 200px;
}

Current appearance of mini cart

#header-cart.skip-active {
  @include menu;
    display: block;
    position: absolute;
    z-index: 200;
    top: 40px;
    right: 0;
    width: 320px;
    background: white;
}

Best Answer

Got back to this after mucking around the backend for a while.

The problem was actually in the header.phtml file. To move the account and minicart, you change the positioning of the account-cart-wrapper div. Inside this div, the Minicart functionality in its entirety is called from different template files, while the account menu is called from within header.phtml. The account menu, when triggered, was located in the header image div and positioned itself accordingly. When moved to the account-cart-wrapper div, it behaved as expected.

Wound up with the following

    <div class="account-cart-wrapper">
            <a href="<?php echo $this->helper('customer')->getAccountUrl(); ?>" data-target-element="#header-account" class="skip-link skip-account">
                <span class="icon"></span>
                <span class="label"><?php echo $this->__('Account'); ?></span>
            </a>
            <div id="header-account" class="skip-content">
                        <?php echo $this->getChildHtml('topLinks') ?>
            </div>
            <!-- Cart -->

            <div class="header-minicart">
                <?php echo $this->getChildHtml('minicart_head'); ?>
            </div>
   </div>

CSS

  #header-account.skip-active {
background: rgba(252, 241, 252, 0.9) none repeat scroll 0 0;
border: 1px solid #e8d2e1;
display: block;
position: absolute;
right: 0;
top: 40px;
width: 140px;
z-index: 200;
}

Some other material changes also happened...

Related Topic