Creating a "split" nav bar

I'm trying to recreate an existing website that is built in Flash, but bring it into a WordPress website. The problem is that the station manager wants the new website to look exactly like the existing website. I'm not sure I can design one that looks that bad, but I'm going to give it a try while still making it much more functional.

The original flash website has the "shield" logo of the radio station in the center and the navigation menu is split on both sides of the shield logo.

Option #1:

I'm thinking that I will use two custom menus to accomplish this. I'll create the main nav menu and position it to the left of the shield and then create a secondary nav menu positioning it to the right of the shield but aligning it horizontally with the main nav menu.

Option #2

My other thought was to create a single main nav menu, but create a section in the center that is blank (as in NO navigation links) as the image of the shield will prevent a visitor from clicking anything there.

I'm after an opinion here. Would Option #1 or Option #2 be easier and simpler to create? Since I'm doing this one gratis (I do some work for the radio station and support it when I can), I need to do this quickly and with as little time or effort on my part as I can. My new son-in-law will be working on it with me, so I'll have him put the content in. Any ideas would be greatly appreciated.


James Dunn
Athens, GA USA

  • PC
    • WPMU DEV Initiate

    Hey JD,

    Howdy Ho !

    Greetings and thanks for posting on the forums.

    Long time :slight_smile:

    Well, according to be, both the solutions should go well, however, I would prefer the second one over the first one.

    The reason is that you will have to do less CSS work in the second one.

    The main thing I would like to highlight here is if you are going to overlap the main nav and the logo, make sure you increase the Zindex of the logo so as it is on top of the navigation menu.

    Lets see what other members of the community have to say :slight_smile:

    Cheers, PC

  • James Dunn
    • The Crimson Coder

    Hey Thanks @Pranaya Chaudhary (PC).

    I was leaning heavily towards Option #1 - using two widgets to accomplish it. It would probably mean some PHP work to register additional menus and widgets, but I've done that several times before. That's why I was leaning there, it was more familiar to me.

    Considering Option #2, how would I create the blank area in the NavBar using CSS? I haven't looked up how to do that, so I was curious. It sounds like that would be very easy from what you're saying though.

    Z-index - Coolest thing I learned a few years back. Without it, some things are difficult and darned near impossible to accomplish. But, once you get it, you can do some really cool stuff on a website. Of course, you have to watch the order of things when you change those z-indexes. We created a really neat graphic header for a print shop (well, I didn't, I'm graphically challenged) and when we put it all together, the graphic made the nav bar un-clickable (is that a word? it is today). We ended up breaking the graphic up into separate parts so that the ink that was running down the screen did not cover the nav area. Of course, that created its own set of issues and we ended up dropping the cool idea because it just wasn't cost effective to accomplish.

    Anyone that is not familiar with z-index would sever themselves well to learn more about it.

    Thanks again PC for your comments here. Would love to hear anyone else's opinion. Heck, I may try both ways just to create fodder for an article that I can write.

    James Dunn
    Athens, GA USA

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.