CSS Menu - how to style section headers

[twwitt]

Hi -- I'm using the CSS menu, not making many changes, except wanting to style my Section Headers (have used this menu many times before but never had the occasion to make use of section headers). There are a number of general posts on this topic, but none that really address this simple question.

I would assume it would be in the css menu stylesheet toward the end where there's a style called:

.primary-nav li.sectionheader

but it is prefaced by this warning:
/* BIG NOTE: I didn't do anything to these 2, never tested */

I tried changing css settings in .primary-nav li.sectionheader, but nothing happens.

Is it possible to style the section headers without going into the menu template?

Any suggestions?

[Dr.CSS]

Yes but you need to make sure they have the sectionheader class, a link to the site always helps in this board...

[twwitt]

Here's the template and below is the css:

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. *}
{if $count > 0}
<div class="menuwrapper-ver">
<ul class="primary-nav-ver">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

and Css:

Code: Select all

/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen and mark and Nuno */
/* The wrapper determines the width of the menu elements */
.menuwrapper-ver {
/* just smaller than it's containing div */
	width: 100%;
        margin-right: 0px;
	margin-left: 0px;
/* room at bottom */
	margin-bottom: 10px;
}


/* Unless you know what you do, do not touch this */
.primary-nav-ver, .primary-nav-ver ul {
/* remove any default bullets */
	list-style: none;
        text-align: right;
	margin: 0px;
	padding: 0px;
/* make sure it fills out */
	width: 100%;
/* just a little bump */
	margin-left: 1px;
}
.primary-nav-ver ul {
/* make the ul stay in place so when we hover it lets the drops go over the content below else it will push everything below out of the way */
	position: absolute;
/* just a little bump down for second level ul */
	top: 5px;
/* keeps the left side of this ul on the right side of the one it came out of */
	left: 100%;
/* keeps it hidden till hover event */
	display: none;
}
.primary-nav-ver ul ul {
/* no bump down for third level ul */
	top: 0px;
}
.primary-nav-ver li {
/* negative bottom margin pulls them together, images look like one border between */
	margin-bottom: -1px;
/* keeps within it's container */
	position: relative;
/* bottom padding pushes "a" up enough to show our image */
	padding: 0px 0px 4px 0px;
/* you can set your own image here */
	/*background: url([[root_url]]/uploads/ngrey/liup.gif) no-repeat right bottom;*/
}
.primary-nav-ver li li {
/* you can set your width here, if no width or set auto it will only be as wide as the text in it  */
	width: 220px;
	padding: 0px;
/* removes first level li image */
	background-image: none;
}
/* Styling the basic apperance of the menu "a" elements */
ul.primary-nav-ver li a {
/* specific font size, this could be larger or smaller than default font size */
	font-size: .9em;
/* make sure we keep the font normal */
	font-weight: bold;
/* set default link colors */
	color: #ececec;
/* pushes li out from the text, sort of like making links a certain size, if you give them a set width and/or height you may limit you ability to have as much text as you need */
	padding: 0.8em 0.5em 0.5em 0.5em;
/* makes it hold a shape */
	display: block;
/* removes underline from default link setting */
	text-decoration: none;
/* you can set your own image here this is tall enough to cover text heavy links */
	/*background: url([[root_url]]/uploads/ngrey/libk.gif) no-repeat right top;*/
         
}
ul.primary-nav-ver a span {
/* makes it hold a shape */
	display: block;
/* pushes text to right */
	padding-left: .2em;
        padding-right: .5em;
}
ul.primary-nav-ver li a:hover {
/* stops image flicker in some browsers */
	/*background: url([[root_url]]/uploads/ngrey/libk.gif) no-repeat right top;*/
/* changes text color on hover */
	color: #fff;
        font-weight: bold;
 

}
ul.primary-nav-ver li li a:hover {
/* you can set your own image here, second level "a" */
	/*background:  url([[root_url]]/uploads/ngrey/darknav.png) repeat-x left center;*/
/* contrast color to image behind it */
	color: #000;
        background: #f6e7d7;
}
ul.primary-nav-ver li a.menuactive {
/* black and bold to set it off from non active */
	color: #fff;
	font-weight: bold;
}
ul.primary-nav-ver li li a.menuactive {
/* contrast color to image behind it, set below */
	color: #000;
/* not bold as text color and image behind it set it off from non active */
	font-weight: normal;
}
ul.primary-nav-ver li ul a {
/* insures alignment */
	text-align: left;
	margin: 0px;
/* relative to it's container */
	position: relative;
/* more padding to left than default */
	padding: 6px 3px 6px 15px;
	font-weight: normal;
/* darker than first level "a" */
	color: #fff;
/* removes any borders that may have been set in first level */
	border-top: 0 none;
	border-right: 0 none;
	border-left: 0 none;
/* removes image set in first level "a" */
	background: none;
}
ul.primary-nav-ver li ul {
/* very lite grey color, by now you should know what the rest mean */
	background: #e5d7c6;
	margin: 0px;
	padding: 0px;
	position: absolute;
	width: auto;
	height: auto;
	display: none;
	position: absolute;
	z-index: 999;
	/*border-top: 1px solid #FFFFFF;*/
	/*border-bottom: 1px solid #374B51;*/
	/*Info: The opacity property is  CSS3, however, will be valid just in CSS 3.1) http://jigsaw.w3.org/css-validator2) More Options chose CSS3 3) is full validate;)*/
	opacity: 0.95;
/* CSS 3 */
}
/* Fixes IE7 bug */
.primary-nav-ver li, #primary-nav-ver li.menuparent {
	min-height: 1em;
}
/* Styling the basic apperance of the second level active page elements (shows what page in the menu is being displayed) */
.primary-nav-ver li li.menuactive, .primary-nav-ver li.menuactive.menuparenth li.menuactive {
/* set your image here, dark grey image with white text set above*/
	/*background:  url([[root_url]]/uploads/ngrey/darknav.png) repeat-x left center;*/
}
.primary-nav-ver li.menuparent span {
/* padding on left for image */
	padding-left: 1.5em;
/* down arrow to note it has children, left side of text */
	/*background: url([[root_url]]/uploads/ngrey/active.png) no-repeat left center;*/
}
.primary-nav-ver li.menuparent:hover li.menuparent span {
/* remove left padding as image is on right side of text */
	padding-left: 0;
/* right arrow to note it has children, right side of text */
	/*background: url([[root_url]]/uploads/ngrey/parent.png) no-repeat right center;*/
}
.primary-nav-ver li.menuparenth li.menuparent span,
.primary-nav-ver li.menuparenth li.menuparenth span {
/* same as above but this is for IE6, gif image as it can't handle transparent png */
	padding-left: 0;
	/*background: url([[root_url]]/uploads/ngrey/parent.gif) no-repeat right center;*/
}
.primary-nav-ver li.menuparenth span,
.primary-nav-ver li.menuparent:hover span,
.primary-nav-ver li.menuparent.menuactive span,
.primary-nav-ver li.menuparent.menuactiveh span, {
/* right arrow to note hover */
	/*background: url([[root_url]]/uploads/ngrey/parent.png) no-repeat left center;*/
}
.primary-nav-ver li li span,
.primary-nav-ver li.menuparent li span,
.primary-nav-ver li.menuparent:hover li span,
.primary-nav-ver li.menuparenth li span,
.primary-nav-ver li.menuparenth li.menuparenth li span,
.primary-nav-ver li.menuparent li.menuparent li span,
.primary-nav-ver li.menuparent li.menuparent:hover li span  {
/* removes any images set above unless it's a parent or active parent */
	background:  none;
/* removes padding that is used for arrows */
	padding-left: 0px;
}
/* IE6 flicker fix */
.primary-nav-ver li.menuh,
.primary-nav-ver li.mnuparenth,
.primary-nav-ver li.mnuactiveh {
	/*background: url([[root_url]]/uploads/ngrey/libk.gif) no-repeat right top;*/
	color: #899092
}
.primary-nav-ver li:hover li a {
/* removes any images set above unless it's a parent or active parent */
	background:  none;
	color: #000;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
.primary-nav-ver li:hover ul ul ul,
.primary-nav-ver li.menuparenth ul ul ul,
*/
.primary-nav-ver ul,
.primary-nav-ver li:hover ul,
.primary-nav-ver li:hover ul ul,
.primary-nav-ver li.menuparenth ul,
.primary-nav-ver li.menuparenth ul ul {
	display: none;
}
/* for fourth level add
.primary-nav-ver ul ul ul li:hover ul,
.primary-nav-ver ul ul ul li.menuparenth ul,
*/
.primary-nav-ver li:hover ul,
.primary-nav-ver ul li:hover ul,
.primary-nav-ver ul ul li:hover ul,
.primary-nav-ver li.menuparenth ul,
.primary-nav-ver ul li.menuparenth ul,
.primary-nav-ver ul ul li.menuparenth ul {
	display: block;
}
/* IE Hack, will cause the css to not validate */
.primary-nav-ver li,
.primary-nav-ver li.menuparenth {
	_float: left;
	_height: 1%;
}
.primary-nav-ver li a {
	_height: 1%;
}
/* BIG NOTE: I didn't do anything to these 2, never tested */
.primary-nav-ver li.sectionheader {
	border-left: 1px solid #006699;
	border-top: 1px solid #006699;
	font-size: 130%;
	font-weight: bold;
	padding: 1.5em 0 0.8em 0.5em;
	background-color: transparent;
	margin: 0;
	width: 100%;
        color: #fff;
}


/* separator */
.primary-nav-ver li hr.separator {
	display: block;
	height: 0.5em;
	color: #abb0b6;
	background-color: #abb0b6;
	width: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid #006699;
	border-right: 1px solid #006699;
}

[Dr.CSS]

That means absolutely nothing as they may have a different class like menuparent or ? that is why I say a link to the site helps us help you in situations like this...

[twwitt]

Sorry, now I've see that a client has been in there making a mess of things -- I think I know how to fix it...thanks!