- This topic has 12 replies, 4 voices, and was last updated 8 years, 11 months ago by
.
- Posts
When I navigate over a menu item towards the right side of my screen, the child items that are shown get cut in half such that the list of items gets cut off vertically and I have to scroll over to the right to see the rest. It then displays a grey area that is not part of my site and I have to scroll back to get to the rest of my site. If necessary I could provide a screen capture video to further explain what I am talking about. By the way, this is a great theme, I just am having this one main problem at the moment.
Thanks,
MattHey Matt
Thanks for giving Ultra a try and for taking the time to send through feedback like this, it’s most appreciated.
WordPress offers the ability to limit the number of levels deep a drop down menu can go. I’m not doing that in Ultra at the moment with the idea being that it gives a little more freedom. Drop down menus are absolute positioned, each new new list gets put next to the one before it and so on. I’ve checked out a few notable themes and it’s possible to re-create this problem you’re seeing in Ultra. Ultra has the menu, on a laptop screen especially, quite close to the edge. I think this brings to light this shortcoming quite quickly.
For right now I’m afraid you’d need to manually restrict how many levels deep you’re going with the menu items that are near to the end of the menu and therefore close to the end of the screen.
The page ideally shouldn’t be create a scroll bar when this happens, the menu items should just disappear off the end of the screen, I’ll look into that.
I’ve looked around a bit, I think the only way of resolving this in the next version would be to either restrict the levels of drop downs that can be used OR go the more advanced route of using JavaScript to detect where the screen is ending and make adjustments based on that. I haven’t done this before so I’ll need to play around a little.
Hopefully that helps a little to explain what’s going on. Let me know how you come along.
Hey Andrew,
I seem to have similar issue with the menu items going off screen. Please check The utter right menu item ‘Tutorials’ on http://outsideit.net
Any tips how I could solve this?
Grtz
Willem
Hi Willem
Good to hear from you. I nearly have 0.9.4 ready, apologies for the delay.
I’ll take another look at this and come back to you and Matt ASAP. Looking around now, I think the most logical solution would be to identify items near the end of the menu and drop them down to the left and not the right. An example of this in action can be seen here: http://jsfiddle.net/bw7k3yee/4/.
We could also apply a maximum width to the drop down menu, that would force long items onto two lines though. I’m not sure that’s favourable.
Chat further tomorrow.
(Thanks so much for the back link, that’s very kind of you 🙂 )
Andrew,
Thank you for another super fast response on your free theme! 🙂 The back link is absolutely no problem..
Your example to make the menu drop down to the left looks very nice and imho better then a max width.
Grtz
Willem
Hi, in the responsive menu (<600) the menu does not collapse and the procedure to line up the menu to the left does not work version 0.9.4
But anyway thanx for the beautiful theme.Hi Joop
Thanks again for your support.
Left Aligned Drop Down Menus
I’ve tested out the left aligned drop down menus again and they seem to be working correctly in my demo. I’ve added a demo video to the instructions, perhaps you can double-check your setup:
https://purothemes.com/documentation/ultra-theme/menu-locations/
I’ve unfortunately missed something. I haven’t reversed the left alignment for the responsive menu so if you do use this technique, please add the following to a Custom CSS plugin like Simple Custom CSS to correct:
/* Remove after Ultra 0.9.5: Correct left aligned drop down menus in the responsive menu */ .responsive-menu .main-navigation.toggled ul li.left ul { text-align: left; }Responsive Menu Collapse
I’m unfortunately not able to replicate the bug you’re seeing. Please could you check what collapse point you have set at Appearance > Theme Settings > Navigation > Responsive Menu Collapse and if possible, explain a bit further what you’re seeing.
Thanks again 🙂
Hey,
Also just updated and most of the changes I had to put in custom CSS seem to work ‘out of the box’ now. The left css class works perfect for me.
Thanks for maintaining the theme!
Grtz
Willem
Hi thanx for your correction, this solves the problem. My remaining point (Maybee i should open a new forumitem?) is that the menu for small devices doe not collapse the submenu items. This results in a very long list if you have multiple items/subitems because they always stay visible. In my opinion the responsive menu should collapse in the same way as the desktop menu
Hi Joop
Glad to hear you made progress on the drop downs.
I’m afraid you’ve raised a weakness of the current mobile menu. It’s something I’ll need to try improve on moving forward.
I don’t have a JavaScript hotfix but I could perhaps try help with Custom CSS. We could make the font smaller of the sub menu items on mobile or perhaps we could hide them. OR I could look into creating a child theme and allowing you to add a new menu, one that would display just for mobile.
I don’t mind helping out on this one. Let me know what you think might work best and we’ll go from there.
You must be logged in to reply to this topic.