WordPress.org

Support

Support » Themes and Templates » [Resolved] Change box heigt op dropdown menu item

[Resolved] Change box heigt op dropdown menu item

  • I am trying to change the height of my dropdown menu in Twentyten. I want the 3 dropdown items to be closer together (some height as my menu bar)

    Here’s the site in progress, the problem sits in the menu IN STOCK: http://www.schlichtebergen.com/Wordpress

    Preferably I have a thin white line between each drop down item.

    I can’t figure out where to edit the height of each box. Would someone here has a clue to help me out?

    This is the current css of the menu part:

    /* =Menu
    ————————————————————– */

    #access {
    background: #444b46;
    margin: 0 auto;
    width: 940px;
    display:block;
    text-transform:uppercase;
    font-family: Arial;
    float:left;
    }
    #access .menu-header,
    div.menu {
    font-size: 12px;
    font-weight: normal;
    margin-left: 20px;
    }
    #access .menu-header ul,
    div.menu ul {
    list-style: none;
    margin: 0;
    }
    #access .menu-header li,
    div.menu li {
    float:left;
    position: relative;
    }
    #access a {
    display:block;
    text-decoration:none;
    color:#fff;
    padding:0 30px;
    line-height:28px;
    }
    #access ul ul {
    display:none;
    position:absolute;
    border: 1px solid #FFFFFF;
    top:28px;
    left:0;
    float:left;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    width: 150px;
    z-index: 99999;
    }
    #access ul ul li {
    min-width: 120px;
    }
    #access ul ul ul {
    left:100%;
    top:0;
    }
    #access ul ul a {
    background:#444b46;
    line-height:1em;
    padding:30px;
    width: 108px;

    }
    #access li:hover > a,
    #access ul ul :hover > a {
    color:#819484;
    background:#444b46;
    }
    #access ul li:hover > ul {
    display:block;
    }
    #access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
    color: #819484;
    }

    * html #access ul li.current_page_item a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    color:#819484;
    }

Viewing 9 replies - 1 through 9 (of 9 total)
  • The extra space is here both in line height and padding.
    #access ul ul a {
    background:#444b46;
    line-height:1em;
    padding:30px;
    width: 108px;

    }
    You should be able to add the white border here also.

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    I believe that padding is to big:

    #access ul ul a {
    	background:#444b46;
    	line-height:1em;
    	padding:30px;
    	width: 108px;
    
    }

    Just out of curiosity, why did you decide to do this with a different menu styles? TwentyTen theme had nice dropdown menu that you could just customize with the above background and all this would work perfect 🙂

    Both thanks for your reply. Although I now know at which section to look, whatever I am trying, the dropdown boxes won’t go smaller.

    The padding of 30 is my spacing between the menu items, and I want the dropdown to be aligned on the menu item above, so can’t touch the 30.
    The line-height doesn’t change the height even now I’ve put it to 0.1em

    I wish each dropdown item to be 28px in height (same as the menubar), os for 3 items, the total dropdown box is 3x28px.

    Should I add a code to control the height of each box?

    Regarding your question about the different menu style, as fas as I know I just started editing the standard style.css that came with Twentyten!

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    Take a look at my css menu, http://wordpress.pastebin.com/6dYyMrbm it’s pure css 3-levels dropdown menu.

    <ul class="menu">
    
    	<li><a href="<?php echo home_url(); ?>/">Home</a></li>
    	<?php wp_list_pages('title_li=' ); ?>
    
        </ul><!-- end .menu -->

    Great thanks a lot, I had a look and copied few handy sections, now it is what I had in mind: http://www.schlichtebergen.com/Wordpress/

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    Anytime and if this helped can you please make this topic resolved from your end.

    I pulled out the site again and it looks great!

    Enjoy WordPress,
    Emil

    Emil, I am struggling with two other issues but I might need to start a new post for this:

    At my website in progress http://www.schlichtebergen.com/Wordpress/ I am trying to get rounded corners on all 4 corners of the white box. Would there be a script to add these?

    And another thing is I am tryting to add a shadow around this same wihite box, but now only seems to appear at the bottom.
    Would you need to add this on the header.php and page.php?

    Emil,you’re dropdownmenu is great, but it’s partly hidden behind a content box, how can I solve?

    I’ve solved above problem.
    The menu is great and works well, also in IE8, but there is a problem with hoover in IE7.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Resolved] Change box heigt op dropdown menu item’ is closed to new replies.