Reducing height of #nav menu bar

• 

  realagenda · Member · Dec 2, 2011 at 7:00 pm

  • Copy link
  • Add topic to favorites

  I have been trying to reduce the height of the #nav menu bar on the Enterprise theme. Originally, it is set at 45px. I have changed the height to 30px, but the black background’s height does not get smaller.

  This work is being done on a private blog that I am working on, but the menu bar can be seen at the Enterprise Demo here: http://enterprisedemo.wordpress.com/

  The code I’ve applied to the #nav code is:

  #nav {
  min-height: 30px;
  {

  The original code is:

  #nav {
  min-height: 45px;
  }

  Why wouldn’t the change take place?

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 2, 2011 at 9:16 pm

  • Copy link

  You have set a “minimum” height. That means it will not get shorter than that number. Because a “min-height” is set in the original CSS, set a max-height as well and make them both the same. (I tried setting a regular height, but the min-height overrides it no matter what.)

  min-height: 30px;
  max-height: 30px;

  You will also have to set a line height in #supernav ul otherwise the current page background image will hang out the bottom. 5px seems to work with a height of 30px.

  #supernav ul {
  line-height: 5px;
  }

• 

  thesacredpath · Member · Dec 2, 2011 at 9:18 pm

  • Copy link

  You’ll also have to set the line-height to 5px in .navright (RSS icons on right end of menu bar).

  .navright {
  line-height: 5px;
  |

• 

  realagenda · Member · Dec 3, 2011 at 12:13 am

  • Copy link

  Marvelous! Thanks!

• 

  thesacredpath · Member · Dec 3, 2011 at 3:36 am

  • Copy link

  You are welcome.