Magento Themes: Moving the Search Bar under the Navigation Bar

For the last couple of days, I have been trying to move the search bar under the navigation bar. This is my 3rd iteration of a Magento theme for my t-shirt site. I liked my first theme when it was created, but that was 7-8 months ago. I started working on a new design about a month ago (used Inkscape and Photoshop). After I converted the design into a Magento theme (a couple of weeks ago), I decided to go into a different direction – procrastination at it’s best. While creating this new theme, I spent a couple of days trying to move the search bar under the navigation bar. It was actually quite easy.

I assumed that I should update either local.xml or catalog.xml. I tried multiple “solutions”, but nothing worked. While using Firebug to change the styling, I noticed that the position for the .form-search class was set to absolute:

.header .form-search { 

So I changed it to:

.header .form-search { 

I then moved the search bar under the navigation (in /app/design/frontend//default/template/page/html/header.phtml).

<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="quick-access">
            <!-- moved from here: -->
	    //echo $this->getChildHtml('topSearch') ?>
            <p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>
            <?php echo $this->getChildHtml('topLinks') ?>
            <?php echo $this->getChildHtml('store_language') ?>
        <?php echo $this->getChildHtml('topContainer'); ?>
        <?php echo $this->getChildHtml('topMenu') ?>
        <!-- moved to here: -->
        <?php echo $this->getChildHtml('topSearch') ?>

When you refresh your page, you should see the search bar under the navigation. Easy enough.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks