Fly out menu positioning

  • Resolved mshoptaw

    (@mshoptaw)


    10 years, 1 month ago

    I have a site that has a small main menu in the left nav and a fairly long secondary, fly out menu. On many screens the fly out menu drops off the bottom of the screen. If I could change the menu so it anchored on the bottom item in the list and flew out and up it would work perfectly. Is there anyway to do that?

    You can this issue if you go to heavenearthcreations.com and hover over the “gallery” menu item in the left nav.

    Thanks for any ideas.

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

    Thread Starter mshoptaw

    (@mshoptaw)

    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!

    Thread Starter mshoptaw

    (@mshoptaw)

    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: https://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.

    Thread Starter mshoptaw

    (@mshoptaw)

    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

    You are welcome.

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