Help - Search - Members - Calendar
Full Version: Horizontal Navigation Bar
Movable Type Community Forum > Additional Resources > Tips and Tricks
manditri
Hi,
I am new to Movable type and web programming in general.
I am trying to create a simple text based horizontal nav-bar just below the banner.
I am using MT 3.34
I tried to follow a tutorial at LMT but didnt do anything to my pages. And anyways that article says at the top its out of date.

I am not sure where the markup shuould be put. I understand that it has to be called from within the theme's .css file isn it.

I would really appreciate some help otherwise my site is going to be hard to use without a nav bar.
Any examples?
PRO IT Service
Hello manditri,

You don't need to touch the theme .CSS unless you want to apply a specific look and feel to your Blog Navigation.

Basically you will have to add the navigation to your Templates, starting with:

> Templates > Indexes > Main Index

> Templates > Archives > %All Templates%

Then check out if the navigation shows up on your Web site corresponding page.

If not, then you will need to tweak a little also the .CSS for defining the display characteristics.

A link to your Web site may allow me to provide you more specific suggestions.


Happy blogging,
Mihai Bocsaru
manditri
Hi,
my website: www.mdas-ca.info

i was just testing that everythings working and havent added any content yet. But this is the theme I will be using( the powell street).

I added this code to the main_index.tmpl file(as shown on LMT):

<div id="nav">
<a href="http://www.yoursite.com/about.html">about</a> | <a href="http://www.yousite.com/archives.html">archives</a> | <a href="http://www.yoursite.com/contact">contact</a> | <a href="http://www.yoursite.com/index.xml">rss</a>
</div>

Then rebuilt the pages but doestn show anything on the site.

I was wanting to put the nav-bar where it says "Hello there" just below the banner
PRO IT Service
Hi,

Ignore what is written on LMT for now.

Just go where I've advised you to go:

> Templates > Indexes > Main Index

> Templates > Archives > %All Templates%

and add that:

CODE
<div id="nav">
<a href="http://www.yoursite.com/about.html">about</a> | <a href="http://www.yousite.com/archives.html">archives</a> | <a href="http://www.yoursite.com/contact">contact</a> | <a href="http://www.yoursite.com/index.xml">rss</a>
</div>


To then customize your look and feel edit your styles-site.css file

from:

CODE
/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://www.mdas-ca.info/mt-static/themes/base-weblog.css);
@import url(http://www.mdas-ca.info/mt-static/themes/theme-powell_street/theme-powell_street.css);
/* end StyleCatcher imports */


into:

CODE
/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://www.mdas-ca.info/mt-static/themes/base-weblog.css);
@import url(http://www.mdas-ca.info/mt-static/themes/theme-powell_street/theme-powell_street.css);
/* end StyleCatcher imports */

#nav { padding: 0 0 15px 15px; text-transform: uppercase; }


feel free to play with the CSS customization of the #nav until you are happy with the result

Enjoy blogging,
Mihai Bocsaru
manditri
Hey Mihai
thanx man...I was stupidly going through the folders in the cgi-bin directory to find the main index template.
it works fine now.....I will make the changes in other templates as required.
Thanx a lot..

By the way that arcelor mittla webtv site is really looking nice. Great job
PRO IT Service
Great job manditri,

I'm glad you like the Arcelor Mittal WebTV project I've developed.

It's among my preferred projects as well. Much more to come ;-)

Stop by any time you need help. If you need also work to be done, the better tongue.gif


Good luck,
Mihai Bocsaru
manditri
Sure man...once I earn a few bucks myself I will be ready to avail your service for my site smile.gif

btw my actual site is www.manditri.com Once I have figured things I need in MT I will be putting more content.
PRO IT Service
i've taken a look at it wink.gif

get starting with your blog and you could always ask for advice or improvements

happy blogging,
Mihai Bocsaru
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.