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

[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?

[Leo]

Hi there,

This might help: https://docs.generatepress.com/article/navigation-dropdown/#opening-specific-sub-menus-to-the-left

[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?

[Leo]

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?

[Vera]

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

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

[Tom]

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 🙂

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

[Tom]

I just updated the CSS here: https://docs.generatepress.com/article/navigation-dropdown/#opening-specific-sub-menus-to-the-left

Can you try replacing it?

[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?

[Tom]

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 🙂

[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

[Leo]

Try this CSS:

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

[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!

[Tom]

No problem! Glad we could help 🙂

[Author]

Posts