Arc shaped Nav bar


I am trying to put together a website however need to make a navigation bar which is curved. If you take a look at the following link you will see what i mean.

Can anyone advise me or point me in the right direction as to how i need to do this?


Yes, you could make the top left corner of the image you use for the nav white, that would solve it.
Also, it seems to me the slider is “snooping” some 3 pixels off the bottom the logo, or am I being to picky? :wink:
Otherwise, the design looks really nice, I love it! :slight_smile:

Thanks dude! :wink:

Will let you know how i get on.

Thanks again

Snipe, snipe, snipe… I guess you’ve taken down the slides for maintenance or revamping, because they aren’t showing up on either Chrome or Opera.

I have to agree with DS here, it’s a nice effect, but it is going to cause more problems than the site owners are probably prepared for. Of course, that may not be bad for you, if you’re charging them a pretty penny for site maintenance. :slight_smile:

IMO, the nav graphic should include the white part at top left. I guess you’d save it as a transparent PNG and then use CSS to position it on top of the slide show.

At this moment in time, your PNG does NOT include the necessary white part at top left.

With all possible respect, I really don’t have time to go into more detail.

Once again, I’m impressed! You are the Main Man.

Thanks people.

It’s always good to hear some good stuff about ones work :slight_smile:

Now in regards to this issue on the top left.

I tried adding a background to the logo and tried the nav aswell yet still when the slider slides to the next image you can see the overflow, i was trying overflow:hidden but am slightly unsure about what to apply it to should it be needed?


Thanks everyone,

I have tried that and it works absolutely perfectly!


Thanks again

Yes as mentioned above just re-do the nav image but make the top part above the green section a solid white while still keeping the part below the green as transparent and it should work straight away.

Yes, you need to fix that issue at top left.

Also, on my screen there appears to be very slight jagged edging along the top of the green nav bar.

Could you not minimize / eliminate that by using an inner glow?

Other than that, you’ve done well and you’ve got yourself a truly original site. Bravo!

The only thing that really would be worth fixing—from a visual point of view—is hiding the gallery images from the top left corner (above the curved nav). Just looks a little odd to see the images above the nav as they scroll.

Ah well i’m just the designer/developer i just take whats given to me! :lol:

I don’t think the nav will need to be changed, and it if does it wont for a long time :wink:

Is that a slideshow that’s going to be playing behind/under the arc’d nav bar too?

Personally I like the look of it, but it looks like a horror to build, much less make browser compatible. I would urge them to at least make the menu bar horiz.

Boy, that requires a lot of extra work for no real gain. The site would look fine with a horizontal nav. Looks like that layout was designed by a graphic artist who has no understanding of how websites work.

Well, you’d have to use images for the links, and I’m sure IE will throw all sorts of hissies. At this stage in the development of the web, you have to think in squares, unfortunately. I would seriously talk with the designer about the practicality of this layout.


I think i’ve managed to do it :lol:

I have checked it in Safari, IE7, and Firefox and seems fine.

However can you guys please let me know if i’ve done a good job ?

This is the link:


And if you can’t convince the designer to change the layout then you would just have to stagger some floats.

Here is an example that uses sandbag divs but it can been done with floated list items.

Looks good to me on FF 3.6!

What happens when the client wants to add/change/remove a menu item? How much trouble would it be to upkeep/maintain?

The ‘fitness | relaxation | fun’ threw me off in the logo. I thought they were links as they follow the same basic format as the arc’d menu. Just a thought though.

I’d tell the artist to take a hike and pitch it. This very much smacks of one of those “but I can do it in photoshop” moments which has absolutely nothing to do with what’s practical in HMTL/CSS - much less what’s accessible. You’re looking at being stuck with fixed metric fonts since dynamic fonts will break multiple layout elements (including CONTENT ones), it’ll be a pain the ass to maintain and/or update the content… Just say no!

I mean, you could do it, but it’s gonna be a train-wreck code-wise and I wouldn’t even want to THINK about what happens the first time anyone wants to change/update the content.

This is a great example of why drawing some goofy picture in photoshop has NOTHING to do with practical web design.