WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Sub-menu item height in twenty twelve child (13 posts)

  1. jkshay
    Member
    Posted 1 year ago #

    I'm trying to reduce the height of sub-menu items in my twenty twelve child theme.

    I've tried:

    ul.sub-menu li, ul.sub-menu li a {
    	height: 30px !important;
    	line-height: 30px !important;
    }

    with no luck - the resulting submenu item height is 47px as seen by Chrome Developer Tools. So I thought I'd try the specific class for the first menu item:

    .menu-item-156, .menu-item-156 a {
    	height: 30px !important;
    	line-height: 30px !important;
    }

    with still no luck. Finally I assigned a class in the child-theme's menu by turning on Screen Options--> CSS Classes and assigning the class "custom_sub_menu" to the first sub-menu item, then adding this bit of CSS:

    .custom_sub_menu {
    	height: 30px !important;
    	line-height: 30px !important;
    }

    Still no luck - what am I missing?

    I've got approximately 13 sub-menu items under one of my main menu items, and there's an extraordinarily large amount of vertical space between my sub-menu items. Any help would be greatly appreciated.

    Thanks!

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    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 )

  3. jkshay
    Member
    Posted 1 year ago #

    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!

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you provide a link to the webpage in question?

  5. jkshay
    Member
    Posted 1 year ago #

    http://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?

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  7. jkshay
    Member
    Posted 1 year ago #

    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!

  8. jkshay
    Member
    Posted 1 year ago #

    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?

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  10. jkshay
    Member
    Posted 1 year ago #

    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 http://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! :)

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  12. jkshay
    Member
    Posted 1 year ago #

    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!

  13. jkshay
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic