How do I adjust the height of items on drop-down menus?

The first of the attached images shows the height of main-menu items using the old Responsive v. 2.2.3 template (chigov.com). The second of the attached images shows the height of main-menu items using the Responsive2 template (test2.chigov.com).

The latter's items appear with greater vertical height. Is there a template parameter that controls this, or must I address it via CSS? Or some other way?

Jim

Hi Jim,

Try adding

#menu ul ul > li a, #menu ul ul > li .zen-menu-heading {line-height:1.5em}

to the custom css file

sorry I should have mentioned the current value is 2em

Cheers
Paul

Thanks, Paul, that works. (Tho you missed a semicolon after "1.5em".)

Two other questions:

1. A space remains above and below all the drop-down items (see attached). How do I eliminate those?

2. The main menu displays more stretched-out horizontally than in Responsive v. 2.2.3-- in both the space between menu items, and the space between letters. How might I compress these?

(The template has a "Dropdown Minimum width" parameter, but that doesn't seem to affect the dimensions in question.)

Jim

Hi Jim,

Yes you are right I do add a semi-colon but it isn't actually required if its the last style in a line - some people don't add the semi-colon for file size reasons

at the moment it looks like you addressed the space above and below the links

I'll need to check on the drop down width value

Cheers
Paul

Thanks for that semicolon insight, Paul.

To clarify: The spaces above and below the drop-down items still appear, as shown in the attached (from test2.chigov.com).

Jim

ah ok its not that noticeable to me and my dodgy eye sight

Try adding #menu ul ul {padding: ?? 20px;}

replacing ?? with your value

the current value is 20px so changing ?? will change the top and bottom padding

Cheers
Paul

That works; thank, Paul.

How do I specify the font for main menu and its drop-down items? I don't don't see an option for this in the template parameters.

Jim

Hi Jim,

Are you wanting to change the actual font or the padding, font weight etc

Cheers
Paul

Paul,


I want the typeface to resemble that of the main menu in Responsive v. 2.2.3 (shown in the attached image from the current chigov.com): less stretched-out horizontally, in both the space between menu items and the space between letters.

Jim

So something along the lines of #menu ul ul > li a {font-size:100%;}

Cheers
Paul

Thanks, Paul.

That cuts the horizontal space of the drop-down items--but it doesn't affect the size of the main menu text. How do I cut the horizontal size of the latter?

Jim

Hi

Have you fixed this? it looks ok when I view the site

Cheers
Paul

Paul, the main menu text is still bigger than that of the drop-down items.

This is after I implemented your last CSS suggestion:
#menu ul ul > li a {font-size:100%;}

How might I shrink the horizontal size of the main-menu text?

test2.chigov.com

Jim

Hi Jim,

I do see the same size difference on your current size

Can you not comment out all the font size changes you have made and use the base font size in the template?

Cheers
Paul

OK, I removed the font-size CSS for the main menu.

Notice that the main-menu font (typeface) is different from that of the main content.

From this I surmise that the template's base-font parameter does not control the font of the main menu.

How do I change the typeface of the main menu?

Jim

Hi Jim,

The template settings have different font selections for different parts of the site

Different font families will render a font size and weight differently

It looks like the body font family is sans serif while the navigation is open sans

Cheers
Paul

If you don't have these settings can you attach a screenshot of the fonts tab

Cheers