Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Sub menus in right-aligned navigation bar goes off screen on smaller display

Home Forums Support Sub menus in right-aligned navigation bar goes off screen on smaller display

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #436491
    Vera

    On this page, when you click the envelope icon in the top right corner…

    http://www.marshallart.com/HOME/

    …the submenu is cut off on tablets like a 9.7” iPad in landscape mode. It’s wide enough to display a regular menu and too wide to trigger the hamburger menu.

    Is there a setting to make the submenu at the right align to the left instead so it doesn’t drop off when clicked?

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    GP Premium 1.5.5
    #436558
    Leo
    Staff
    Customer Support
    #437579
    Vera

    Thank you. I tried pasting the code into the custom CSS box, but it didn’t change anything. Maybe there something I needed to tweak specific to my site, but I can’t for the life of me figure out what. (I’m neither beginner nor advanced in my CSS capabilities.)

    Also, I only want the menu at the top right to open to the left (my secondary menu, that is) not my primary menu which is directly above the content area. Can this CSS be limited to just one of the menus?

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #437923
    Leo
    Staff
    Customer Support

    Yup that’s what my link is supposed to do: https://docs.generatepress.com/article/navigation-dropdown/#opening-specific-sub-menus-to-the-left

    Did you add the custom class open-left for the menu item?

    #438033
    Vera

    All I did was paste in the style rules. Can you tell me where to find that field? I must be overlooking it.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #438034
    Vera

    Oh, never mind — I just saw that the instructions had a link to that ( I didn’t realize you have to turn on CSS display settings). Sorry!

    I tried adding the class to both the top menu and the submenus (either/or and both) but it doesn’t seem to be having any effect.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #438095
    Tom
    Lead Developer
    Lead Developer

    The class should be added to the parent item – not the items within the sub-menu. It looks like you have it added to the sub-items right now.

    Let me know 🙂

    #438109
    Vera

    That happened to be the last thing I tried before posting so I left it that way. But I mentioned that I tried only the parent menu, only the child menus, and both the parent and child menus together. None of the variations worked.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #438110
    Tom
    Lead Developer
    Lead Developer
    #438174
    Vera

    Nope, still not working. I’ve tried it in both Safari and chrome for the iPad. I don’t have access to my computer just now, but I will try it there when I do.

    I take it that it doesn’t work when you look at my site either?

    It would be nice if this was a checkbox option under each of the menu styles in GPP rather than having to include so many additional lines in that skinny Additional CSS box. A suggestion for the future release maybe?

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #438178
    Tom
    Lead Developer
    Lead Developer

    Oh sorry – you’re using the Secondary nav.

    Replace .main-navigation in the CSS you added with .secondary-navigation and it should work.

    I agree, it would be nice to get this baked into the theme by default. We’re working on it 🙂

    #438211
    Vera

    That worked. Thank you!!!

    Now that I see it opening to the left, I see that my submenu text is quite a distance from the menu title. It creates a bit of a disconnect in the relationship of the item to the title. Is there any CSS I can add to make just that menu a bit narrower? I tried adding a separate width rule but it messes things up.

    Another alternative is to align the text to the right. I don’t normally care for right-aligned text — especially not when all the other text is left aligned — but in this case I think I can make an exception. Can you show me how to do that without breaking the menu? I’d like to see which works better.

    This seems a related topic, but if you prefer I start a new post with it, let me know and I will.

    Thanks again

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #438304
    Leo
    Staff
    Customer Support

    Try this CSS:

    .secondary-navigation ul li.open-left ul {
        width: 150px;
    }
    #438410
    Vera

    Perfect! That worked. I went ahead and removed the open.left class so the width would apply to all the drop downs in my secondary menu. 👍🏻 Using that selector, I was also able to test right-align for my text, but I didn’t like that look.

    I’m almost finished. I just need to figure out how to get custom headers to do what I want. I’ve been having nothing but trouble.

    Thank you again!

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #438438
    Tom
    Lead Developer
    Lead Developer

    No problem! Glad we could help 🙂

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