Support » Themes and Templates » CSS positioning dropdown menu item

  • Hi

    On my 2 dropdown menus, one is positioned lower than the other. How can I rectify this, either through relative positioning or some other means?

    My blog is onandoffthegringotrail.com and the dropdown menus are located under the ‘stories’ and ‘yarns’ menu buttons.

    Thanks for any help 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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.

    Thread Starter onandoffthegringotrail

    (@onandoffthegringotrail)

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

    Thread Starter onandoffthegringotrail

    (@onandoffthegringotrail)

    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…

    Thread Starter onandoffthegringotrail

    (@onandoffthegringotrail)

    Beauty, thanks a bunch.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS positioning dropdown menu item’ is closed to new replies.