Floating main nav with the Headway WordPress theme

on November 22nd, 2010 by Richard Orelup in Development - General - Wordpress
| Share

Recently I saw a tweet announcing an updated look to the website What Spinks Thinks and when I checked it out I noticed an issue with the navigation. You can see it in the screenshot below.

What Spinks Thinks Headway WordPress theme navigation issue

As you can see the last link has wrapped around below the rest.

I looked and was seeing the issue on Linux/Windows in FF/Chrome/IE which I thought it was funny that it hadn’t been noticed yet. I mentioned it to the owner, David Spinks, and he wasn’t seeing the issue nor were the people that he showed it too. That instantly made me think it was a font issue, which it was as David (and I assume all the people who he showed it to) had the “gill” font that was in the CSS where me and my test boxes do not. I believe it is one that comes with some Adobe products so most designers probably have it which is probably why the people he showed it to didn’t notice either.

So to be helpful (and because I’m always curious when it comes to CSS issues), I started looking at the problem. What had happened was the original font was thinner then what a browser defaults to and to get the thing to float right a set width was put on the UL that housed the nav. When the thicker font went in it now became bigger then the holding UL and would then wrap around. This was a bad solution overall though because not only do we have the font issue but if you added a tab everything would be thrown off as well. Also if you removed a tab it would float in an off center spot until the size was adjusted.

I wanted to create a solution that would work no matter what was in the middle (well, unless it gets bigger then the 970 width of the whole thing, then you are out of luck without making the whole page bigger) and would always be centered like it should.

This normally would be a simple task until I saw what was going on behind the scenes. The site uses the Headway WordPress theme that I had never heard of previously but looks to be another “Pretend to be a designer” theme like Thesis or Frugal where you can make changes with drop downs and check boxes. What they really do is make it a pain in the ass for anyone who actually knows how to actually develop to fix the mistakes it makes or can’t accomplish because you have to do it their specific way so you don’t break their theme. So my original fixed CSS I sent to him wasn’t really going to be the simple fix I had expected.

So after seeing what I needed to do I modified what I was doing to work inside that system. Here is the CSS and maybe it can help someone else –

So now the menu should work for everyone on that site and returns to the nice clean look that it is suppose to have. I always hate it when a nice looking site is ruined by some little thing but is a good example of why you have to look at sites on lots of different machines/OSs/browsers to make sure everything is what you expect.

This will probably lead into another one of my hate on these “play designer” themes as the CSS produced automatically is just a mess to look at and is excessively long. Would take more time then I want to put towards it but I bet you could easily cut the css in 1/4 if not more, and could probably even reduce the HTML size. That’s why it’s better to have it made by someone who knows what they are doing as overall this is a simple design that could be done much cleaner which saves bandwidth and processing. But most people look at the cost figure why not, and overall they don’t really care about performance and probably won’t get enough traffic for it to ever really be an issue.

Handling this also made me think there is a need for some better CSS analyizing tools out there, that might already exist that I don’t know of. Will have to look and see. As well there has to be a better way to do these make your own themes.

Also of note is that if you are using a font that others might not have (and pretty much assume us Linux people don’t) it is a better option to use something like Cufon to make it so everyone can see the font you want.

Comments: 1 Tags:

One Response to “Floating main nav with the Headway WordPress theme”

  1. SaaS says:

    Thanks for the help, I have seen this on sites as well and was wondering what I was seeing. Cufon will be a very helpful tool as well. Thanks

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>