sacredpath
(@sacredpath)
Automattic Happiness Engineer
Hi there, If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.
Jetpack plugin
Child Themes
Child Theme creation plugins
Custom CSS plugins
In the child theme CSS, add the following to bottom align the submenus.
.main-navigation ul ul {
bottom: 0;
top: initial;
}
That worked perfectly, thank you!
I am going to try to unwind all the changes I made to the theme and put them in the child theme… learning as I go!
It turns out it works in Chrome but not in IE. Any ideas about what I’m doing wrong?
sacredpath
(@sacredpath)
Automattic Happiness Engineer
Ah, I should have checked. No version of IE supports the “initial” keyword, which is why it isn’t working in IE: http://www.w3schools.com/cssref/css_initial.asp .
This is a “hack” but we can use a negative value for “top” to move the menu up to bottom align.
.main-navigation ul ul {
top: -290px;
}
The other option would be to open the parent CSS and delete the top declaration from .main-navigation ul ul. The issue here of course is the possibility of the change being overwritten by a theme update later on.
The -290 worked. I very much like the idea of the child theme to make it easier to maintain over time. I think I’ve moved my customization out of the main theme now. Thanks again!
sacredpath
(@sacredpath)
Automattic Happiness Engineer
