How would you code a ribbon on the ends of the Primary Nav?

Community Forums Forums Design Tips and Tricks How would you code a ribbon on the ends of the Primary Nav?

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  Susan Nelson 1 year, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #48775

    Susan Nelson
    Participant
    Post count: 207

    Does anyone have an idea of how to code a ribbon on both ends of the primary nav?

    I would like to have the notched part be a separate image on both sides, but I’m not sure if there’s a way to hook into anything to do it.

    Ideas? Thanks!


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    • This topic was modified 1 year, 4 months ago by  Susan Nelson.
    • This topic was modified 1 year, 4 months ago by  Susan Nelson.
    #49406

    Dorian Speed
    Participant
    Post count: 140

    I’ve done this, but it’s been a while, so I may be misremembering and there’s probably a more elegant solution.

    I think you just need to make that section wider than the rest of the .wrap area.
    Then create an image that’s the whole navigation, including the corners, and make it the background.
    Then use some negative values for the margins to scoot things around where you want them to go.

    I did this on this site, but it was one of the very first sites I made so it might be a hacky way of doing things – and it’s not mobile-responsive. Here’s the relevant CSS:


    #nav {
    background: transparent;
    clear: both;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 200;
    height: 49px;
    margin: 0 0 0 -25px;
    padding: 0px 20px 0;
    text-transform: uppercase;
    width: 1010px;
    }

    #nav .wrap {
    background: url("images/nav.png") no-repeat scroll left bottom transparent;
    height: 49px;
    margin: 0 0 0 -10px;
    overflow: auto;
    width: 990px;
    }


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

    • This reply was modified 1 year, 3 months ago by  Dorian Speed.
    • This reply was modified 1 year, 3 months ago by  Dorian Speed.
    #49443

    Susan Nelson
    Participant
    Post count: 207

    Thanks, Dorian. :) Yeah, that’s pretty much what I ended up doing. I wanted to see if I could make it with 3 separate images, but in the end, 1 image makes more sense.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

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

The topic ‘How would you code a ribbon on the ends of the Primary Nav?’ is closed to new replies.