WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change box heigt op dropdown menu item (10 posts)

  1. pxpvdm
    Member
    Posted 3 years ago #

    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;
    }

  2. marjiec
    Member
    Posted 3 years ago #

    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.

  3. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    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 :)

  4. pxpvdm
    Member
    Posted 3 years ago #

    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!

  5. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    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 -->
  6. pxpvdm
    Member
    Posted 3 years ago #

    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/

  7. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    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

  8. pxpvdm
    Member
    Posted 3 years ago #

    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?

  9. SongSong
    Member
    Posted 3 years ago #

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

  10. SongSong
    Member
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic