Twenty Twelve Menu Height

  • Author
    Posts
  • #1162214

    edgelinux
    Member

    I have made massive amounts of revisions to my site and I think I am on the very last change I need to make. That is the menu height, I would like it about 2/3 of what it is currently however I do not see anywhere to set this setting.

    Thank you very much in advance for your assistance.

    The blog I need help with is cuttingedgelinux.com.

    #1162502

    The height of the menu in the Twenty Twelve theme comes from the line height for the links inside the menu. Here is the rule:

    #access a {
    	line-height: 3.333em;
    }

    Try setting it to 1em or 1.5em like this:

    #access a {
    	line-height: 1.5em;
    }
    #1162507

    edgelinux
    Member

    @designsimply that worked on the main menu but not the sub menu. Since it separated the menu from the sub menu those are no longer usable. I have an example screenshot here: https://www.dropbox.com/s/6x8c319fi707won/Menu_008.jpg

    as you can see the submenu entries are also not resized correctly with the supplied code. I found the placement of the submenu’s, to fix that it was
    #access ul ul {
    top: 2em;
    line-height: 2em; // this did not change the menu height.
    }

    I seem to be getting a transition bleed through someplace, the menu starts out at its old height and transitions to the new height.

    Its odd with no transition code in that area and the only other thing I have transitions of is the menu color.

    #1162540

    Good catch. So, you need to adjust the position of the top of the submenus to match whatever line-height you choose for the main menu line, like this:

    #access a {
    	line-height: 1.5em;
    }
    
    #access ul ul {
    	top: 1.5em;;
    }

    Next, to adjust the height of the submenu links, adjust their line height and top/bottom padding (the “5px” value in the example below) and set the left/right padding to match the top menu elements (the “1.2125em” value in the example below).

    #access ul ul a {
    	line-height: 1em;
    	padding: 5px 1.2125em;
    }

    I’m not sure about the transition—I’m not seeing that.

    #1162545

    edgelinux
    Member

    The transition code is split into a seperate section because parts of my code go through a testing section and then when they are known to work well with everything it gets added to the main block for that section. The transition information is here:


    #access ul li a:link {
    transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition: 1.5s, linear;
    -o-transition: 1.5s, linear;
    -moz-transition: 1.5s, linear;
    -webkit-transition: 1.5s, linear;
    background-color: #2E240F;
    color: rgb(238,238,238);
    }

    #access ul li a:visited {
    transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition: 1.5s, linear;
    -o-transition: 1.5s, linear;
    -moz-transition: 1.5s, linear;
    -webkit-transition: 1.5s, linear;
    background-color: #2E240F;
    color: rgb(238,238,238);
    }

    #access ul li a:hover {
    transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition: 1.5s, linear;
    -o-transition: 1.5s, linear;
    -moz-transition: 1.5s, linear;
    -webkit-transition: 1.5s, linear;
    background-color: #152A0E;
    color: #D2EDC9;
    }

    #access ul ul a:link {
    transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition: 1.5s, linear;
    -o-transition: 1.5s, linear;
    -moz-transition: 1.5s, linear;
    -webkit-transition: 1.5s, linear;
    background-color: #2E240F;
    color: rgb(238,238,238);
    }

    #access ul ul a:visited {
    transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition: 1.5s, linear;
    -o-transition: 1.5s, linear;
    -moz-transition: 1.5s, linear;
    -webkit-transition: 1.5s, linear;
    background-color: #2E240F;
    color: rgb(238,238,238);
    }

    #access ul ul a:hover {
    transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -webkit-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition: 1.5s, linear;
    -o-transition: 1.5s, linear;
    -moz-transition: 1.5s, linear;
    -webkit-transition: 1.5s, linear;
    background-color: #152A0E;
    color: #D2EDC9;
    }

    #1162546

    edgelinux
    Member

    I decided to do it differently at the top instead of part down the page and that is accomplishing the same overall goal. Getting more space for my Menu’s. I am happy with the current operation of the menu.

The topic ‘Twenty Twelve Menu Height’ is closed to new replies.