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

[Susan Nelson]

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!

[Dorian Speed]

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!

[Susan Nelson]

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.

[Author]

Posts