0

I want to make my navigation fill the space of the header vertically. I've tried 100% height with no luck. If you see here on the development site: http://inspiredworx-labs.com/sites/mannings/ the homepage menu item has a red background that does not stretch/fill the full height of the header. How can I achieve it, so that all menu items fill the height, even if the height changes?

Thanks

Huw Rowlands
  • 591
  • 1
  • 7
  • 17

2 Answers2

0

The only way I know to achieve this is a bit tricky but very solid.

Here is a nice and clear explanation :

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Alexandre Lavoie
  • 61
  • 5
0

You need to increase padding as below. So, it will look as you need the updates.

#masthead .nav ul li a{
  padding: 19px 15px;
}
Rahul J. Rane
  • 246
  • 1
  • 8
  • If I add the 19px top and bottom margins, and the header height increases, then the menu won't fit flush again. Thanks for the help though. – Huw Rowlands Oct 09 '13 at 14:02
  • @HuwRowlands - To stretch/fill the full height of header in responsive layout, you can make update as below. `#masthead .nav { display: block; }` – Rahul J. Rane Oct 10 '13 at 07:00
  • Doesn't change anything? Thanks – Huw Rowlands Oct 10 '13 at 12:26
  • @HuwRowlands - I just checked and in responsive layout menu items are not displaying as the position is changed to absolute for `#masthead .nav`. 1) so I think you need to update it from `absolute` to `relative` to view menu items as it was there previously. 2) `#masthead .nav { display: inline-block; font-size: 1.3rem; font-weight: normal; position: relative; }` here, you need to update css as `display: block;`. As I'm not able to give screenshot over here. Let me know if I'm assuming correct or not. – Rahul J. Rane Oct 10 '13 at 13:17