Joomla Templates Club 406,261 posts

[ric ordea Friend ric ordeaJoin date: October 2010Posts: 20Downloads:14Uploads:1 Thanks: 2 Thanked: 3 times in 1 posts]

#166998

I am trying to have a simple horizontal menu appear above the search box. I am close but need a little help in perfecting this.

The attachment is what I currently have.

My problems are:
1. I would like the search module position to align to the right under the new menu. It is currently being pushed to the left instead of staying right aligned under the menu in the top right.
2. I would like the menu to use the same css of the footer menu (Overlay in the attached file) and I’m not sure how to make that happen.

Problem 1:
Here are the steps I have taken so far.

I added the code in red to header.php to create a new module position above the search box.

<div id="ja-hot-news" class="wrap">

<div class="main">

<div class="inner clearfix">

<?php if ($this->countModules('hotnews')) { ?>

<div id="ja-hotnews" >

<jdoc:include type="modules" name="hotnews" style="JAxhtml" />

</div>

<?php } ?>

</div>

</div>

</div>

<div id="ja-header" class="wrap">

<div class="main clearfix">

<?php

$siteName = $this->sitename();

if ($this->getParam('logoType')=='image'): ?>

<h1 class="logo">

<a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>

</h1>

<?php else:

$logoText = (trim($this->getParam('logoType-text-logoText'))=='') ? $config->sitename : $this->getParam('logoType-text-logoText');

$sloganText = (trim($this->getParam('logoType-text-sloganText'))=='') ? JText::_('SITE SLOGAN') : $this->getParam('logoType-text-sloganText');?>

<div class="logo-text">

<h1><a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a></h1>

<p class="site-slogan"><?php echo $sloganText;?></p>

</div>

<?php endif; ?>

<?php if( $this->countModules('above_search') ): ?>
<div id="ja-above_search" style="float:right;" >
<jdoc:include type="modules" name="above_search" />
</div>
<?php endif; ?>

<?php if($this->countModules('search')) : ?>

<div id="ja-search">

<jdoc:include type="modules" name="search" />

</div>

<?php endif; ?>

</div>

</div>

I then added the module position “above_search” to templateDetails.xml. I create a menu module and the attachment is what my site looks like. What do I need to do to make the search box right aligned under the menu? Any help would be greatly appreciated.

Problem 2:
I’m not sure how to handle this issue of formatting the menu to look just like footer menu? Is there a certain suffix I need to apply under the advanced tab of the menu module? I would like to just use the same css styling as the footnav settings from the template.css. I’m just not sure how to “assign” those settings to the new top menu.

Thanks in advance for any assistance.

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#404860

Dear ric ordea,

Please add css below to fix your problem :

#ja-above_search {position:absolute; top:0; right:0;}
#ja-above_search .mainlevel{color:#333; background: url(../images/icon-dash.gif) no-repeat left center; padding:0 7px 0 10px; display:block; float:left;}
#ja-above_search .mainlevel:first-child{background:none; padding-left:0;}
#ja-above_search .mainlevel:hover {color:#8A880F}

Hope this work for your site, please let us know if you have any problem.

Regards,
TrungHuynh

1 user says Thank You to chavan for this useful post

1. ric ordea

[ric ordea Friend ric ordeaJoin date: October 2010Posts: 20Downloads:14Uploads:1 Thanks: 2 Thanked: 3 times in 1 posts]

#404992

Thank you so much! That was exactly what I needed. Awesome customer service.

[ric ordea Friend ric ordeaJoin date: October 2010Posts: 20Downloads:14Uploads:1 Thanks: 2 Thanked: 3 times in 1 posts]

#482757

I am in the process of updating to Joomla 2.5 but am running into issues with this again. I previously had to select “Legacy – Horizontal” menu style for this to work. How can I replicate this based on the above CSS?

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#483178

Hi Ric,

Please try to add css code (above) into template.css file.

Regards

[ric ordea Friend ric ordeaJoin date: October 2010Posts: 20Downloads:14Uploads:1 Thanks: 2 Thanked: 3 times in 1 posts]

#483485

I added the code css from post #2 but it still displays the content menu looking like the attachment in my original post. The only thing that seems to be different is that I can’t assign the “Legacy-Horizontal” format.

[ric ordea Friend ric ordeaJoin date: October 2010Posts: 20Downloads:14Uploads:1 Thanks: 2 Thanked: 3 times in 1 posts]

#483486

Looking back at my properly functioning 1.5 site, if I change the menu style to anything other than the “Legacy-Horizontal” it messes up the formatting to again look like the attachment in my first post. That is why I figured that missing css for the Legacy-Horiz was the missing element. Thanks for the assistance!!!

1 user says Thank You to ric ordea for this useful post

1. JA Developer

[Author]

Posts