Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Custom Horizontal Nav Bar for WordPress?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #41380
    tigerpaw
    Member

    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!

    #117621
    tigerpaw
    Member

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

    #117623
    Paulie_D
    Member

    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.

    #117627
    chrisburton
    Participant

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

    #117652
    tigerpaw
    Member

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

    #117656
    chrisburton
    Participant

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

    #117660
    chrisburton
    Participant

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

    #117661
    tigerpaw
    Member

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

    #117665
    chrisburton
    Participant

    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 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.