WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
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.
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:
designsimply#access a {
line-height: 3.333em;
}Try setting it to 1em or 1.5em like this:
#access a {
line-height: 1.5em;
}@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 {<br />
top: 2em;<br />
line-height: 2em; // this did not change the menu height.<br />
}
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.
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.
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:
<br />
#access ul li a:link {<br />
transition-duration: 1.5s;<br />
-moz-transition-duration: 1.5s;<br />
-webkit-transition-duration: 1.5s;<br />
-o-transition-duration: 1.5s;<br />
transition: 1.5s, linear;<br />
-o-transition: 1.5s, linear;<br />
-moz-transition: 1.5s, linear;<br />
-webkit-transition: 1.5s, linear;<br />
background-color: #2E240F;<br />
color: rgb(238,238,238);<br />
}</p>
<p>#access ul li a:visited {<br />
transition-duration: 1.5s;<br />
-moz-transition-duration: 1.5s;<br />
-webkit-transition-duration: 1.5s;<br />
-o-transition-duration: 1.5s;<br />
transition: 1.5s, linear;<br />
-o-transition: 1.5s, linear;<br />
-moz-transition: 1.5s, linear;<br />
-webkit-transition: 1.5s, linear;<br />
background-color: #2E240F;<br />
color: rgb(238,238,238);<br />
}</p>
<p>#access ul li a:hover {<br />
transition-duration: 1.5s;<br />
-moz-transition-duration: 1.5s;<br />
-webkit-transition-duration: 1.5s;<br />
-o-transition-duration: 1.5s;<br />
transition: 1.5s, linear;<br />
-o-transition: 1.5s, linear;<br />
-moz-transition: 1.5s, linear;<br />
-webkit-transition: 1.5s, linear;<br />
background-color: #152A0E;<br />
color: #D2EDC9;<br />
}</p>
<p>#access ul ul a:link {<br />
transition-duration: 1.5s;<br />
-moz-transition-duration: 1.5s;<br />
-webkit-transition-duration: 1.5s;<br />
-o-transition-duration: 1.5s;<br />
transition: 1.5s, linear;<br />
-o-transition: 1.5s, linear;<br />
-moz-transition: 1.5s, linear;<br />
-webkit-transition: 1.5s, linear;<br />
background-color: #2E240F;<br />
color: rgb(238,238,238);<br />
}</p>
<p>#access ul ul a:visited {<br />
transition-duration: 1.5s;<br />
-moz-transition-duration: 1.5s;<br />
-webkit-transition-duration: 1.5s;<br />
-o-transition-duration: 1.5s;<br />
transition: 1.5s, linear;<br />
-o-transition: 1.5s, linear;<br />
-moz-transition: 1.5s, linear;<br />
-webkit-transition: 1.5s, linear;<br />
background-color: #2E240F;<br />
color: rgb(238,238,238);<br />
}</p>
<p>#access ul ul a:hover {<br />
transition-duration: 1.5s;<br />
-moz-transition-duration: 1.5s;<br />
-webkit-transition-duration: 1.5s;<br />
-o-transition-duration: 1.5s;<br />
transition: 1.5s, linear;<br />
-o-transition: 1.5s, linear;<br />
-moz-transition: 1.5s, linear;<br />
-webkit-transition: 1.5s, linear;<br />
background-color: #152A0E;<br />
color: #D2EDC9;<br />
}<br />
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.
This topic has been closed to new replies.
