Child menu orientation

  • Hello all,
    I am not using a plug-in but just the standard twentysixteen theme and menu options. The issue I find is that all my flyouts are oriented to the left. Most websites have the flyouts left aligned and expand to the left.
    The theme seems to be just the opposite. Here are two screen shots. One shows the flyout on a right-side parent menu item and the other, a flyout with a parent menu item on the left. You will see it is terribly cut off. (The images are poor quality for a quick load).
    I have searched the net for an answer but it seems lots of people are using a plugin.

    This is probably a simple fix or an variable I have not set.

    Any insight folks?


    <hr />

    (These are links in case the images don’t display properly.)

    Thanks for looking.

Viewing 8 replies - 1 through 8 (of 8 total)

  • In my Twenty Sixteen theme the drop downs are exactly under the master link and yes, they do obscure some body text. As I have the navigation menu above the header image, the first drop downs cover the header image (not a problem) and then continue to overlap any body text. In your case, having the menu under the header and a large amount of child pages seems to be a problem although in my opinion not a massive one. The visitor can always take their mouse away from the menu to fully absorb your body text. Sorry, I don’t have a definitive answer – but looking at your site it did not seem a big problem for me.

    Thread Starter Gordon

    (@zawaree)

    Thanks Andrzej,

    I can rephrase here a bit.
    The body text being covered is fine. My issue is how they flyout. The child menu-items are obscured because they are completely outside the container(s).

    One error in my above paragraph:
    Most websites have the flyouts left aligned and expand to the left.

    I mean to say:
    Most websites have the flyouts left aligned, drop straight down and expand to the right.

    So it’s only the children of the primary (main) menu items which flyout to the left instead of to the right.

    I figured there would be a setting to declare the orientation of the flyout menus. I’m of course always happy to use css.

    Thanks again gang,
    -Gordon

    I see. By the way, this doesn’t look like a Twenty Sixteen theme being used.

    Thread Starter Gordon

    (@zawaree)

    It’s Twenty Sixteen using a 2016 child theme and styles.

    Can you provide a link to your site so we can inspect further?

    Thread Starter Gordon

    (@zawaree)

    Nope. It’s under development and not available to the public.

    The basic idea stands. Why does twenty-sixteen have that crazy ‘fly-out’ positions which expand to the left.

    Do the screen shots get the point across? Even the basic theme with no changes, the menus fly out to the left so I imagine any twenty-sixteen install would do the trick.

    Thanks for the help themesumo.

    Sorry I can’t be of more help.

    I just got this working on a site using the following CSS in a child theme:

    .main-navigation li:hover > ul,
.main-navigation li.focus > ul {
    left: 0;
    right: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    right: auto;
    left: 100%;
}

    Hope this helps someone.

    Thread Starter Gordon

    (@zawaree)

    @classicridge Awesome fix. In addition I think what I’ll do is add a style for the first child as it formats to the left (as intended) but is then cut off by the left side of the page.
    I really appreciate the help!!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Child menu orientation’ is closed to new replies.