Sub-menu item height in twenty twelve child

You do not need to assign special class to the menu item, just target one level deeper like this

.main-navigation li ul li a {line-height:1;}

( This should get you the idea )

I should have mentioned that I tried that as well, but received no change in format in my menu items. I’ve successfully styled the sub-menu item’s color, background, and font-weight – but when I try to style the sub-menu item’s height or line-height properties I see no change in the layout. I even tried adding !important to your sample above and made it the last entry in my child theme’s style.css and still saw no effect.

Any other suggestions?

Thanks!

Can you provide a link to the webpage in question?

https://www.lisakarenward.com/newsite2/wordpress is the URL; under GALLERY menu item I have several items and I want to reduce the overall height of the submenu and therefore the overall height of the individual submenu items.

While I’m at it, is there a way to have a main menu item that isn’t a link, but rather just contains sub-menu items? For example, I’d ideally like to have no main GALLERY page, but rather individual gallery pages for my different categories so simply clicking on (or hovering over) the main menu item GALLERY just displayed the submenu rather than linking to a page?

item I have several items and I want to reduce the overall height of the submenu and therefore the overall height of the individual submenu items.

If you aren’t already, you should really be using a browser developer tool like Firebug for these kind of exploratory CSS queries.

This style is the cause of your submenu’s line height. Remove it entirely (if it’s within your Child Theme stylesheet) and see the height magically vanishes;

#masthead .main-navigation li.menu-item, #masthead .main-navigation li a, #masthead .main-navigation li ul, #masthead .main-navigation li ul li, #masthead .main-navigation li ul li a {
height: 30px !important;
line-height: 30px !important;
}

I am using Firebug, which is giving me tremendous help in figuring out which elements to style. I didn’t realize my style was causing this; I’ll remove the style and see what you’re talking about. Thanks!

My custom theme is a child of twenty twelve. If I remove my entire custom theme’s style.css contents, I receive a “theme broken” message. If I implement just the code to inherit the parent theme’s style.css, then my gallery submenu still appears the same height as in my custom theme. If I change my theme to the twenty twelve standard theme, then my submenu still appears thicker than I want, and appears in height identical to my child-theme’s style.css-driven submenu.

In a nutshell, it doesn’t seem like removing my child theme’s style.css made any change in my sub-menu appearance.

I’m no html programmer (C# .NET for me), but my understanding of css is that settings that appear lower in the css file are the most recently applied styles, and that adding !important to a style should apply that style, disregarding any settings it may have inherited with regards to that property – such that the last line in my custom style.css being

#masthead .main-navigation li.menu-item, #masthead .main-navigation li a, #masthead .main-navigation li ul, #masthead .main-navigation li ul li, #masthead .main-navigation li ul li a {
height: 30px !important;
line-height: 30px !important;
}

should override any inherited settings for these elements with regards to the properties in question.

Is my basic understanding of CSS wrong?

It looks like I was on the wrong page when I made that suggestion (to remove the code excerpt), I went onto the Gallery page. The gallery page’s menu is not in-question here, right?

If so, your Child Theme is not loading on this page, which would explain why your styles in your Child Theme stylesheet are not applying.

My apologies – after your last post I was changing my themes around so you may have experienced one of the undesired themes.

My child theme’s style.css is indeed in play (I assume) because I’ve successfully changed my menu’s font color, main menu item height, background color, etc.

Try again at https://www.lisakarenward.com/newsite2/wordpress and you should see white menu text on a black background with minimal space above and below the main menu items. It’s the submenu items under the main menu item “GALLERY” that I’m wanting to reduce in overall height.

And thanks again for your assistance! ??

Your last line of code in your Child Theme stylesheet isn’t working because you’re using !important in every other occurrence of the line height.

!important can and should be avoided by using more specific CSS selectors. If you use !important, you then have to add !important to every preceding style you want to override it.

Quick solution; to the last line of your Child Theme CSS, change this;

.main-navigation li ul li a {line-height:1 !important;}

To this;

#masthead .main-navigation li ul li a {line-height:1 !important; height: 0;}

Longer solution; remove all instances of !important and duplicate styles. Leave the last line in (without !important).

Edit: You may need to apply the same style (as the last line) to your list items (<li>) as well as the anchor tags.

I only added the !important when it didn’t seem to work without it – as if it were set as !important in the parent theme.

Sadly, adding your suggestion as the last line in my child theme didn’t seem to take any effect.

I need to go through my custom theme settings, ensure that I’ve got everything ordered properly, then I’ll post my child style.css for analysis.

Thanks!

Andrew-

Many thanks for your assistance with this issue. In straightening out my CSS, I realized that the sub-menu items had a padding-top and padding-bottom value being set. Overriding that value indeed shrank my submenu items as desired.

Again, thanks!