I’m working on my first responsive web design site and I need some help figuring out how to write the css/html for my header section. I have the header mockup available for viewing here.
Here is my bootstrap template that I’ve been working on: header template
Can someone get me started in the right direction on how to approach the header development? Don’t worry about the fonts right now, I’ll fix that last.
Here’s an updated post for this. I think it would help make my request clearer:
Hi all,
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 so far.
Thank you for any help you can provide.
Hi,
That menu is a little confusing as I assumed the “Kobe Japanese Steakhouse” was in fact just the middle link of the menu and should I have seen it on a real page I would have clicked it to death before realising it was not a link but just a logo - and that would have made me look stupid so I would have slinked away never to return :). The prime rule of menu design is “don’t make me think” or “don’t make me look foolish”.
Notwithstanding the logic of the menu then the simplest solution would be to include the Kobe logo as the third item in that menu and not as a separate item. You could then just shrink/expand each item with your media queries as desired so that they fit. If you use display:table and display:table-cell properties (ie8+) you can equally spread each item along the length of the menu quite easily.
From the looks of the design it seems that you will not be able to wrap the menu so your choices are to make each menu item smaller as the screen gets smaller and then for mobile revert to a vertical menu or the “menu” button that lots of sites are using these days.
Paul,
Thank you for your feedback and I agree with the usability issue that you commented about. I will tweak the header. The header I was going for was something like this:
http://www.shakeshack.com/ . But, I think I will move the logo to the left side of the page like a traditional header.
Does the display: table property not work in IE7?
That’s much the same as I said with the logo being the third list item. They used display:inline-block and percentage padding which is not as effiicient as display:table.
Does the display: table property not work in IE7?
No it doesn’t work in IE7 and below but IE7 usage is very low these days (under 1%) and should not be used as a reason not to use more efficient methods for modern browsers. You can always set up conditional comments and just float the menu for IE7 and give it a simpler display if IE7 support is a must.
HI Paul,
I did a little testing yesterday (very brief) and was able to create this menu by simply using the default bootstrap classes of row and span. The only issue I had was getting the last menu item to float to the right edge of the row (Bootstrap classes their floats as “pull right” or “pull left”). Floating that last menu item caused it to be removed from document flow which then messed up the menu, but I"m sure this can be fixed easily if I spend more time on it. I’m also thinking that perhaps I can just simply using Bootstrap’s offset class to the last menu item a column or two to push it to the right rather than floating it. Since RWD is already baked in to the framework, I think this may be a worthy method to go with. The other benefit is that I believe this is IE7 compatible.
Thoughts?
I don’t like frameworks especially ones that rely on floating everything as that seldom works in the real world but seeing as you have gone with it then you better stick to using what the framework recommends. I’m afraid I won’t invest the time and effort in learning someone else’s foibles when I can create my own more easily 
CSS is its own framework; it doesn’t really need another layer (or layers) on top.
