Grow your CSS skills. Land your dream job.

Custom Horizontal Nav Bar for WordPress?

  • # December 16, 2012 at 9:41 am

    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!

    # December 16, 2012 at 10:13 am

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

    # December 16, 2012 at 10:24 am

    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.

    # December 16, 2012 at 10:55 am

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

    # December 16, 2012 at 12:45 pm

    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 :)

    # December 16, 2012 at 1:03 pm

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

    # December 16, 2012 at 1:10 pm

    @tigerpaw
    What that site has is a background image that covers the entire right side of the screen. You can simply make a background image in photoshop and set it as the background.

    When it comes to the hover effects, that is simple css.

    .nav ul li a {
    /* css here for how you want the text to look without being hovered */
    }
    .nav ul li a:hover {
    /* css here for how you want the text to look when being hovered */
    }

    If you’re using a graphic for the hovered button, you can use the onmouseover function to change the img src to the hover img. Here a link to the w3c school for some more direction [W3C onmouseover](http://www.w3schools.com/jsref/event_onmouseover.asp “onmouseover”)
    You could also change the background via CSS. I recommend taking a little time and watching this video that Chris made. It should be more than enough info to figure it out and you’ll definitely learn a bit about what you’re doing.
    [Chris’s Three State Menu](http://css-tricks.com/video-screencasts/7-three-state-menu/ “three state menu”)

    # December 16, 2012 at 1:28 pm

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

    # December 16, 2012 at 1:29 pm

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

    # December 16, 2012 at 1:52 pm

    @chrisburton Yeah, you’re right. I just like giving options. The video Chris made is sprite based. That should be able to show him exactly what he needs to do for it.

    # December 16, 2012 at 1:56 pm

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".