Change Height of Hover Block

  • Unknown's avatar
    elliotstoner · Member ·

    I need help changing the height of the hover block on the menu please! With my basic knowledge, I have a feeling that this hover feature is a script, and I’m not sure how to change the height of the hover block through CSS with that.

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

  • Unknown's avatar
    designsimply · Member ·

    It’s actually not coming from a script! But rather it’s coming from the custom CSS you’ve added. :)

    Let me try to explain it.

    Currently, I see the following two rules in your custom CSS:

    nav#access {
	padding-top: 0;
	height: 52px;
}
li {
	font-size: 19px;
	height: 2px;
}

    Both of those affect the the main navigation on your site in different ways. The first rule makes the main menu container element (#access) 52px tall. The second rule makes the font size for the menu items (and all list items) 19px in size. The “height: 2px” part is odd and probably shouldn’t be there.

    Okay, now, factor in that this rule is set in the theme:

    #access a {
	line-height: 3.333em;
}

    And combine it with the fact that you hard coded the height of the main menu and also increased the font size of menu items using pixels and not ems… and that explains why the height explodes a little.

    There are a couple different ways you could fix it. One would be to manually override the 3.333em line height and set it to 52px to match the height of nav#access like this:

    #access a {
	line-height: 52px;
}
  • The topic ‘Change Height of Hover Block’ is closed to new replies.