Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.
Thanks Esmi but my problem has more to do with finding the div for this particular element, not the div that encapsulates both dropdown menus (i.e. .main-navigation li ul li). I tried the following below, with ‘li.page_item page-item-14’ used to specify the menu I wanted. Unfortuantely it didn’t work. Is there something wrong with this designation?:
.main-navigation div.nav-menu ul li.page_item page-item-14 ul.children {
position: relative;
top: -2px;
}
Looks to me like that’s due to the double line of the first menu items – I would not recommend trying to mess with the positioning of one vs. the other.
What about making this wider:
.main-navigation li ul li a {
width: 12.8571rem;
}
Hi WPyogi
I tried that but it looks a bit tacky. Is It possible to adjust positioning of one vs. the other? And what are the drawbacks?
Cheers
Try this – adjust the 12 if it’s not right:
.main-navigation li ul li.page-item-22 {
position: relative;
top: 12px;
}
Make sure you are checking how your site looks on smaller devices – as modifying a responsive theme can get a bit tricky…