[SOLVED] Unexpected formatting in my menu

[Gillian.Hesse]

Hi there,

I am working on my first site and am modifying the style of my menu.  The menu is coming out exactly as I want except the currently selected menu item is formatted completely different from the rest of the menu.  I have attached a snapshot of the menu that shows the problem.

I am using the simple_navigation template and just modifying the style sheet.  It must be something I have done in my template or style sheet because the problem goes away if I change the page template to one of the defaults (i.e Left simple navigation + 1 column).

This is a snippet from my template where the menu is introduced

Code: Select all

<div id="left_column">

     <div id="menu_vert">
        {menu template="simple_navigation.tpl" collapse='1'}
   </div>

</div>

And a snippet from the stylesheet

Code: Select all

/* define layout of menu area (including news section) */
#left_column {
    clear: left;
    float: left;
    width: 200px; 
    margin: 0 0 10px 0;
    padding: 0;
}

/* define styling of the menu */
#menu_vert ul {
  list-style: none;
  width: 200px;
  padding: 0;
  font-size: 1.1em;
}

#menu_vert li {
  padding-top: 2px;
}

#menu_vert li ul{
  font-size:0.9em;
}

#menu_vert li li {
  text-indent: 20px;
  padding-top: 0px;
}


#menu_vert li  a {
  font-weight: bold;
  height: 20px;
  text-decoration: none;
  color: #505050;
  display: block;
  padding: 6px 0 0 10px;
  background: #f4f4f4;
  border-left: 4px solid #cccccc;
}

#menu_vert li a:hover {
  background: #eaeaea;
  color: #286ea0;
  border-left: 4px solid #286ea0;
}

Thanks

Gill

[RonnyK]

Check the part with menuactive in the default stylesheets.

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
  background-color: #C7C7C7;
}

Ronny

[kermit]

that default menu template makes "currentpage" different than other menu items....



Navigation

Current page is 1: Home
2: CMSMS Works


1. you need to style #menu_vert li.currentpage h3 (note: no link) the same as your other menu items, OR
2. modify the menu template.. perhaps taking out the and making it a link like the rest of the menu.

[Gillian.Hesse]

Thanks a lot for the pointers.

I don't really want to start playing around with menu templates yet.  I'm a bit too new at this.  So I tried out Kermit's first suggestion.

1. you need to style #menu_vert li.currentpage h3 (note: no link) the same as your other menu items,

That definitely helped.  But I couldn't get that current page element in the menu looking the same (especially the size of the coloured background region).

In the end I changed the default menu template I was using to "minimal_menu.tpl" which worked a treat - because it doesn't play around with the "currentpage" like the others do.

Thanks guys, I wouldn't have know what to look for in the default templates to work that out myself.

Gill