Magento – Dropdown button for “topLinks” in header. Issues with dropdown-menu placement

magento-1.7themetoplinks

I'm working on a bootstrap magento theme. My intentions are to have a dropdown menu for the

Here is a jsFiddle of the exact code I am using to produce the dropdown: jsfiddle/BqKNV/9/ (Must add .net as im <10 rep)

It works, on click it will produce a dropdown menu, although the menu appears on the left side of the header, whilst the button is on the right.

Here is a shot of before click: http://imgur.com/ErWYL8Y after click:http://imgur.com/lQKoQB1

My CSS is form bootstrap, with zero edits regarding dropdown menus.

$this->getChildHtml('topLinks')


<div class="header-container">
<div class="header">
    <?php if ($this->getIsHomePage()):?>
    <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
        <?php else:?>
        <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>

    <?php endif?>

<div class="menulinks">
    <?php echo $this->getChildHtml('topMenu'); ?>
</div>

    <div class="dropdown btn-group">
        <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
            Action
                <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <?php echo $this->getChildHtml('topLinks'); ?>
        </ul>
    </div>
    <?php echo $this->getChildHtml('topContainer'); ?>
</div>

Best Answer

Add a pull-right class to <div class="dropdown btn-group">.
And an other thing. It's not OK to do this:

<ul class="dropdown-menu">
    <?php echo $this->getChildHtml('topLinks'); ?>
/ul>

The html from topLinks is already wrapped in a <ul> tag. This will result in <ul><ul><li></li>...</ul></ul>....ugly.
Instead try to change the links template to support different classes. (By the way...I think Magento should support this out of the box). And while you are at it, you can add role="menu" on the list as bootstrap best practices suggests.
Here is how you can do that. The top links are rendered by app/design/frontend/{interface}/{theme}/template/page/template/links.phtml. For your theme you should make this template look as follows:

<?php $_links = $this->getLinks(); ?>
<?php if(count($_links)>0): ?>
<ul class="<?php echo ($this->getClass()) ? $this->getClass():'links'?>"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?><?php echo ($this->getIsDropdown()) ? ' role="menu"':''?>>
    <?php foreach($_links as $_link): ?>
        <?php if ($_link instanceof Mage_Core_Block_Abstract):?>
            <?php echo $_link->toHtml() ?>
        <?php else: ?>
            <li<?php if($_link->getIsFirst()||$_link->getIsLast()): ?> class="<?php if($_link->getIsFirst()): ?>first<?php endif; ?><?php if($_link->getIsLast()): ?> last<?php endif; ?>"<?php endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?></li>
        <?php endif;?>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

The modifications I made here will not affect other sections rendered with this template.
Now you should tell Magento, that for top links you need an other class for the list and that the list acts as a menu.
In app/design/frontend/{interface}/{theme}/layout/page.xml there is this line that adds the top links block. 

<block type="page/template_links" name="top.links" as="topLinks" />

Change it to:

<block type="page/template_links" name="top.links" as="topLinks">
    <action method="setClass"><class>dropdown-menu</class></action>
    <action method="setIsDropdown"><menu>1</menu></action>
</block>
Related Topic