WordPress.org

Ready to get started?Download WordPress

Forums

CSS positioning dropdown menu item (7 posts)

  1. onandoffthegringotrail
    Member
    Posted 1 year ago #

    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 :)

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    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.

  3. onandoffthegringotrail
    Member
    Posted 1 year ago #

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

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;
    }
  5. onandoffthegringotrail
    Member
    Posted 1 year ago #

    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

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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...

  7. onandoffthegringotrail
    Member
    Posted 1 year ago #

    Beauty, thanks a bunch.

Topic Closed

This topic has been closed to new replies.

About this Topic