The question of how to have the Search box on the same line as the Main Menu is asked most frequently at Zemplate.

If you look at the bj.zemplate.com site, you will see that we have done exactly this.

Follow these steps:

Step 1: Open up Extensions -> Module Manager and locate your Search Module. Open it up for editing.
Step 2: In the Search Module, assign it to position-1, which is where the horizontal menu is located.
Step 3: Open up your custom stylesheet and add these lines:

.navigation ul.nav {float: left;}
.navigation form {float: right;width: 300px;}
.navigation {height: 34px}

Step 4: Open your site in a web browser and see if the results are to your liking.

Explanation of what is happening behind the scenes

When you place both these modules into position-1, Joomla 3.3+ & the Protostar template places them both inside the <nav class="navigation"> element of your HTML. If you were to open up the index.php file in your Protostar template you will see these lines:

<?php if ($this->countModules('position-1')) : ?>
    <nav class="navigation" role="navigation">
        <jdoc:include type="modules" name="position-1" style="none" />
    </nav>
<?php endif; ?>

What is happening is that the index.php is testing if there is any module assigned to position-1 with an if statement. If indeed there is a module assigned to position-1, then the elements <nav class="navigation"> is loaded into the HTML for the web page. Just because this is a <nav> element does not mean that only navigation modules can be placed in this area.

With the styling, you put a "float" on both of these elements. When a element is assigned a "float" it no longer is a block element it is an inline element. A block element will take up the entire width of the containing element, whereas an inline element will have an assumed width of auto - meaning that it will expand to it's content unless a specific width is assigned, such as width: 300px;. If you do not put a float on these elements, then they will stack up on the page.

You may also need to do some special styling in your @media section of your stylesheet for the right responsive styling for more narrow devices.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.