I’m having some trouble deciphering the markup of your page, it all seems a little bit confused. I’ll try and point out a few things which I noticed.
- You seem to be containing the entire website in a <header> element which is a little odd.
-
The UL element containing your navigation elements, is the full width of the header, 0px high and positioned no where near your actual li child elements. (see below)
Despite this, I notice that you’re using twitter bootstrap, this framework has some incredibly useful grid based layout functionality which you could very easily utilise here to generally improve the layout mechanics of your website as a whole for all devices.
Here’s the official documentation on using bootstrap grids:
http://getbootstrap.com/css/#grid
and here’s a video explaining how to use the grid system which may be much more useful:
https://www.youtube.com/watch?v=c5xVxSFoyQw
I hope this was helpful.
