[SOLVED]Menu not displaying properly.

[Tino]

Hi,

I've recently converted a standard HTML/CSS template to CMSMS using the video tutorial.

Everything went fine, except for the menu. It's displaying completely wrong, as well as there being an unwanted heading, and I'm stumped as to why.

The easiest way is to just show you here

I can provide the code if needed, but didn't want to put it all in yet in case it was something more simple that I was missing.

Thanks in advance for any help!

[Nullig]

One thing you need to do is to attach the "Accessibility and cross-browser tools" stylesheet to your template.

Nullig

[Tino]

Thanks, did that, and attached the CSSMenu Horizontal stylesheet too.

After attaching the first stylesheet, the heading changed from 'Current page...' to just the page name (e.g. Home). I've been searching around the settings to see if I'm missing an option to display the page title that is set to be on at the moment. Any ideas?

[Nullig]

You need to change your template to use the CSSMenu stylesheet. If you look at the standard page templates you'll see the proper naming of the divs to match the stylesheet.

In your case you have:




which are not part of the CMSMS template code. You should use:




Nullig

[Tino]

Ok thanks, I'll get that changed.

Should it be "menu_horz" if I'm using a horizontal menu, or does it not matter?

[Nullig]

It depends on what you're using in your {menu} tag. If you're using:

{menu template='cssmenu.tpl'}

Then you can look in the cssmenu.tpl file to see what classes and ids are used. If you haven't changed it, it should have:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}

at the top.

If you look at the standard "Navigation: CSSMenu - Horizontal" stylesheet, you can change the properties of those ids and classes to match how you want it to look.

Nullig

[Tino]

What I have in my template as far as the menu is concerned is this:

Code: Select all

	<div id="menuwrapper">
		<div id="menu_vert">
{cms_module module="menumanager"}
		</div><!--menu_vert-->
	</div><!--menuwrapper-->

And in the stylesheet:

Code: Select all

#menuwrapper {
	text-align: center;
	background: url(images/navback.jpg) top left repeat-x #717171;
	height: 50px;
	}

#menu_vert {
	width: 750px;
	border: 0 auto;
	}

#menuwrapper ul {
	margin: 0;
	list-style: none;
	}

#menuwrapper li {
	margin: 0;
	float:left;
	}
	
#menuwrapper li a{
	display: block;
	width: 140px;
	height: 30px;
	margin: 20px 5px 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #fff;
	background: url(images/buttonback.gif) center center no-repeat;
	float: left;
	line-height: 30px;
	text-decoration: none;
	}
	
#menuwrapper li a:hover{
	color: #09f;
	background: url(images/activebuttonback.gif) center center no-repeat;
	}
	
#menuwrapper li a.menuactive{
	display: block;
	width: 140px;
	height: 30px;
	margin: 20px 5px 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #09f;
	background: url(images/activebuttonback.gif) center center no-repeat;
	float: left;
	line-height: 30px;
	text-decoration: none;
	}

My problem is I'm struggling to connect the layout of the menu to what I need to edit.

Thanks.

[Nullig]

Change:
{cms_module module="menumanager"}

to:
{menu template='cssmenu.tpl'}

in your template.

Nullig

[Tino]

Ok, getting there 

What stylesheet is the menu taking those background colours from? Once I know that I should be able to sort the menu completely.

Thanks.

[Tino]

Woo, worked than one out, I still had the CSSMenu Horizontal attached. Now deleted and it's displaying fine!!

Thank you very much for all your help Nullig, it is very much appreciated!