Custom Horizontal Nav Bar for WordPress?

[tigerpaw]

I’m building my first custom WordPress theme, following Chris Coyier’s (he’s great) tutorial on Lynda . The tutorial uses a sidebar for a nav bar, but I’d like to create a horizontal nav bar. I’ve always done this in Dreamweaver (or Fireworks) with CSS, using images as the tabs, but Dreamweaver uses some sort of swap image code:


My worry is that WordPress won’t accept that sort of code used for Nav bar in Dreamweaver?

The tutorial uses a list order approach, html styled with CSS.

I’m guessing I should use the list order approach? But then how do I get the nav bar to be horizontal, and not vertical?

In Dreamweaver, I’d create a nav bar space with CSS, then float the images/tabs into that space, next to one another.

List order uses text, not images. Not sure how to approach. Anyone familiar?

Thanks!

[tigerpaw]

Ah. I think I need to use a float left option in the CSS…

[Paulie_D]

You must be running an old version of DW if it’s recommending using images….not that you can’t but it’s very…erm…20th Century.

A sprite can be the way to go (which is a single combined image) but it entirely depends on the design of your site.

If you have one, why not let us take a look and we could recommend some alternatives.

[chrisburton]

@tigerpaw Are you talking about something like this? http://codepen.io/chrisburton/pen/AbdKe

[tigerpaw]

Thanks to both of you for responding. Chris: yep, I looked at a sample on the w3schools site, and it looks a lot like what you just showed me. I’d love to show you the design, but it’s not coded or online yet. Only the Photoshop version. I don’t think I can insert a jpg here?
But I can show you a past website I designed: http://www.thepinchdc.com/
The nav bar is the same that I’m trying to do with this new site: simple rollovers where the text changes. I think I figured it out though, from the w3school code sample, using a float left CSS style.

Pauli: In Dreamweaver I just imported the graphic I made in Photoshop (nav bar sliced up into each category: “home” as one graphic, “about” another graphic, etc…). But you can insert/image objects/rollover image. That gives you the option to bring in the graphic as a rollover. Dreamweaver ads some sort of image swap code, that swaps from, say, the “home” graphic, to an 2nd “home” graphic I made in Photoshop that you view when the mouse hovers over. But I don’t know if WordPress will allow that sort of thing. That’s why I’m trying to do things without Dreamweaver’s help. Just html and code, the standard way…which I suck at.

I have a design brain, and am fairly new to code, so I’m sure I’m not doing things the best way. That’s why I joined this site :)

[chrisburton]

You can paste images here. Either link us to the file using http://tinypic.com or use html.

[chrisburton]

@keving11189 If he’s using images for the text, he’s better off using a sprite.

[tigerpaw]

Excellent! Thanks for the advice. I’m about to code the design, so we’ll see how it goes.

[chrisburton]

Although he probably doesn’t need a sprite. I agree that he should just apply the menu bar as a background image and use a font to render the text.

[Author]

Posts