Navigation Adjustments

Now I'm back from Barcelona I've hit it hard on the physical development of my site, and the first task to accomplish was creating the navigation system. This has to be robust and work efficiently and it's something that in my case can, if I'm not careful, become very complex. 

This was my initial proposed Navigation bar.

Where it says "option 1" "option 2" etc is each of the buttons that would be used for the navigation of the site. They do not have drop-down menus attached to them but will link to the appropriate area of the page that speaks about that category (they will have appropriate names).

2 issues:

1: The central banner is very reliant on size and proportion, and very little room is left for slightly longer Chapter names for each button. On the mobile version of the site these buttons will appear tiny, too. 

2: I had zero clue on how I would build this. I had designed in (purely for aesthetic reason) a dark grey 'ribbon' that runs behind them all, and I'd no idea on how to execute this. The design was more complex than necessary.

I referred back to some original designs and saw a sketch I had made where there were two rows of buttons with two buttons on each. I liked this as it allowed me to have a bit more room to include a longer title for each chapter but didn't mean that the navigation bar took up too much space. A major worry of mine was having to stack each navigation button one on top of the other. The central banner already meets the fold of the page and is very long, the last thing I wanted was to make it even longer.

You can see how I have changed the navigation bar above. This is not a final design (I haven't added any text at all) and I am still trying to finalise the actual style of it. I'm considering removing the 'backs' of the ribbons as they are so tricky to line up with the central ribbon itself. 

As I said above, I was reluctant to change the navigation boxes so that they stacked one on top of the other. Considering the mobile site, though, the buttons are going to need to be as big and as clear and easy to use as possible. If you consider the size of an iPhone screen, the buttons above (2 on one row) are not really quite big enough to enable easy use. The design of the mobile version of the navigation bar has allowed the buttons to stack one on top of the other to ensure ease of use. The buttons still have an 'over' state of changing to yellow. (Whilst on mobile, this does not apply, it's essentially a 'down' state).