Navigation Bar Redesign
I’ve recently been given the task of designing the website for a local non-profit organization. The founder told me he thinks the http://www.ymca.net website is the perfect design to emulate. I think the Graphene theme is perfect for making a similarly designed website, except that the man in charge wants to take the squared look of Graphene and give it the rounded look of YMCA.net, as well as the gradient colors changing on mouseover and while active. I don’t think the drop-down menus on that page are quite necessary, but the overall look and feel of the navigation is what I’m going for. Also, I would like to keep the navigation bar beneath the header image on my site, NOT on top like the YMCA.net site, so I won’t need to worry about making the navigation bar change places, just appearance.
Can I accomplish this by editing the sprite_h.png file, or should I hard code it in with an image map or something like that? If so, which files would I edit to accomplish this? I’m not a very advanced PHP programmer, but if I have to edit specific code, I’m capable. Any ideas or suggestions?Mod
Graphene uses the “sprite_h.png” file to generate the background for that nav. It’s repeated on the x-axis. You could probably just round off the corners of the
<div>that contain the navigation bar to get a rounded look.
I have lots of rounded corners on my blog. You can see how I achieved this here:
But you should also check out: http://www.gendji.eu/
Sorry about the 404 error. That’s fixed now, if you wanted to check out the early stages of my project. Rounding off the ‘<div>’ sounds super, but I’m also referring to the mouseover and click. When I change the colors of the gradients in the sprite_h.png to more fit my color scheme, it looks incredibly blocky and unprofessional with the contrast in colors, so I’m looking to get those vertical lines in between buttons as well. Any ideas?Mod
It depends on what you want to appear there. What do you want to appear there?
vertical lines in between buttons as well
That should be a border-left or border-right between the first level line item (
<li>) in the navigation menu. I’m playing around with this as well, so I’ll let you know if I have any luck with it.Mod
http://www.fashionfeedswarmth.org/wordpress If you would like to see my end results. Kenneth, I can’t thank you enough for the jumpstart on getting me where I needed to go, and for getting me back into the groove of the whole CSS thing and thinking like a designer again! I will be back if I have anymore roadblocks! Thanks again!
You must be logged in to reply to this topic.