Create Top Menu Position ...almost there...

Hi all,

I'm familiar with how to add module positions to a template and I've added a Top menu to Game Magazine but it's not placed properly across browsers.

Check it out: http://www.gearheaddiva.com

Here's the code I added to logo.php:

Code: Select all

<?php if($this->modules('top_nav')) : ?>
<div id="gkTopmenu">
   <jdoc:include type="modules" name="top_nav" style="<?php echo $this->module_styles['top_nav']; ?>" />
</div>
<?php endif; ?>

I added this code to the bottom of the file. It didn't seem to matter where I put it - the menu always appeared at the top so I left it there for now.

Then I added the following to override.css:

Code: Select all

#gkTopmenu { float:right;}
#gkTopmenu  li {display: inline; text-transform:uppercase; margin-left: 16px;}
#gkTopmenu  li a {color:#666;}
#gkTopmenu  li a:hover {color:#c8a663;}
#gkTopmenu  li:first-child { margin: 0; padding: 0; }

I'm trying to get the menu to display as a horizontal list aligned all the way to the right. In FF it appears as a horizontal list as it should but in IE the menu is a vertical list and it's floating towards the left near the logo.

Any advice would be greatly appreciated!

Hi

For top elements I like to use "position" rule from CSS. I believe it's the easiest way to put something in a place You want.

For example Your to menu:

Code: Select all

#gkTopmenu {
    left: 300px;
    position: absolute;
    top: 10px;
}


You need to also point to which layer this element should be relevant to. In Your top menu case it should be:

Code: Select all

#gkPageTop {
    position:relative;
}


Just try it. And You will see what values for top and left rules to choose.