I'm using Twitter's Bootstrap framework to build my first responsive site. I need some help creating a custom header for my homepage and you can see a graphic mock up of it here
I can float the four menu items (Home, Our Menu, The Experience, Location) , however, I dont know how to do it so there is a gap in the middle for the background image (the kobe logo). Is there a way to do a pseudo class to give that second menu item (Our Menu) a custom margin space so it gives a gap between OUR MENU and THE EXPERIENCE? Or, would a better way to do this be by floating the two menu items HOME, OUR MENU to the left and then float THE EXPERIENCE, LOCATION to the right?
Here's my code
Thank you for any help you can provide.