I am trying to reformat the standard navigation bar that comes in the website template to a custom image (sliding door) navigation bar. I have defined the main index, blog and pages (which are the header titles in the navigation bar) with li class and modified the css template, both my custom one and the screen.css and nothing seems to be working. The list of links simply comes one right after the other. Is there a special way the pages need to be named, or can you even do this with pages? Does this maybe need to go into the html of Main Index template instead of the Navigation template?
Here's one of the Pages from the Navigation Template:
<mt:Pages tags="@tour" limit="1">
<mt:SetVarBlock name="tour"><$mt:PageID$></mt:SetVarBlock>
<li class="tour<mt:If name="nav_on" eq="$tour"> on</mt:If>"><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
</mt:Pages>
Reported on Movable Type 4.2
Hi Tina -
The fact that the links come from pages doesn't matter how you format them, it's just a convenient way to get the links for your navigation.
Ultimately, you'll need to make sure your classes (and ids, if you use them) match up to all of your CSS. For that, the best thing to do is get some sort of developer tool to look at what is in use. This can often be multiple stylesheets, which can make it difficult to troubleshoot.
I personally like Firebug, because it gets to the heart of the matter without too much else. Some like the developer toolbar. I've also worked with some clients who use Chrome, and while it has a nice built in inspection tool, I don't like it as much for modifications on-the-fly.
But whatever you use, you just need to figure out how to override the default classes to make your changes. Another alternative is just rip them out and replace them with your changes. If you are doing something fancy with JavaScript for sliding items, this might be a better option.