[Resolved] Right Fly Out Sub Menu Goes Too Far

Home Forums Support [Resolved] Right Fly Out Sub Menu Goes Too Far

Home Forums Support Right Fly Out Sub Menu Goes Too Far

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #242250
    Mary Pearson

    Hi Tom,

    I’m rebuilding my site again at https://christiangays.com/

    The sub-menu of the last menu item goes too far to the right so that it extends off the page.

    Is there a custom CSS that I can use to make it go to the left instead of to the right?

    Many thanks!

    #242279
    Tom
    Lead Developer
    Lead Developer

    Hi Mary,

    You could try this CSS:

    .main-navigation ul ul {
        right: 0;
        left: auto;
    }
    #242284
    Mary Pearson

    Thank you Tom. That worked perfectly.

    I tried to apply it to secondary-navigation but it didn’t work. What am I missing for secondary sub-menu?

    #242289
    Tom
    Lead Developer
    Lead Developer

    Replace .main-navigation with .secondary-navigation.

    #242353
    Mary Pearson

    Well yes, that’s exactly what I tried that didn’t work.

    I tried

    .secondary-navigation ul ul {
    right: 0;
    left: auto;
    }

    and I tried

    .secondary-navigation ul {
    right: 0;
    left: auto;
    }

    Neither worked, which is why I asked what I was missing.

    #242383
    Tom
    Lead Developer
    Lead Developer

    I’m not seeing that CSS added anywhere on your site?

    If you’re wanting to do the deeper level items, then you would do this:

    .secondary-navigation ul ul ul {
        right: 100%;
        left: auto;
    }
    #242444
    Mary Pearson

    I didn’t leave it because it didn’t work. OK now I have

    .main-navigation ul ul {
    right: 0;
    left: auto; }

    .secondary-navigation ul ul {
    right: 100%;
    left: auto;
    }

    .secondary-navigation ul ul ul {
    right: 100%;
    left: auto;
    }

    If you check the website you will see the primary menu, sub-menu under “Join Us” works great.
    If you check the secondary menu under “About Us”, you will see that it is the default fly out to the right.

    There is also a sub-sub-menu beside link for “Mary Pearson” that you can’t see at all.

    #242538
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .main-navigation ul ul {
        right: 0;
        left: auto;
    }
    .main-navigation ul ul ul {
        right: 100%;
    }
    
    body .secondary-navigation ul ul {
        right: 0;
        left: auto;
    }
    body .secondary-navigation ul ul ul {
        right: 100%;
        left: auto;
    }
    #242630
    Mary Pearson

    Perfect! Thank you so much Tom!

    #242666
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.