I have a site that has a lot of menu items in the desktop (horizontal) menu. The site doesn’t transition to the mobile menu until 600px, and the menu is about 750px wide,so I’d like to find a way to move menu items to become sub-items of a “More” dropdown if the viewport isn’t wide enough to fit all of them.
I would start with looking at the technology known as media queries. This technology will allow you to write CSS that, in combination with how you structure your HTML, will allow you to alter the appearance and placement of items in the menu to fit any device resolution.
If you are already familiar with the technique, I invite you to show us your code for the existing menu and how you would like it to look after the size is changed. Can you show us using a tool like codepen.io?
Thanks! 
2 Likes
Just using CSS won’t quite work…
I have to actually move/create HTML elements based on viewport width… For example, Say I have 10 Top-Level items in the header menu (as in menu items with a dropdown). Each of the menu items is 80px wide. If the viewport is, 700px wide, I would want to 1) Create a menu item (using JS) call “More”, and 2) move the last 3 Items to become child menu items of “More.”
So, the last two menu items get put into a dropdown instead of wrapping and affecting the width of the menu (or being hidden altogether).
Changing markup on the fly sounds unnecessarily fiddly to me. Why not break down the menu into a burger / column menu at a given breakpoint? Keep it simple?
Martyr2 did ask if you could provide a codepen example. That way at least we would have a clearer picture of what you are trying to achieve.
1 Like
So in your HTML, create the “more” menu with its three child items. In the media query OVER 700px, that “more” item is marked “display:none” and the three top level items are marked “display:block”… In the media query UNDER 700px, that “more” item is marked “display:block” (or whatever) and the three top level items are marked “display:none”.
So you wouldn’t be moving the items back and forth, you have them in two places and enable the ones that make sense based on media queries.
An option is to use CSS Flexbox for the navbar. The CodePen below has 10 items in the navbar. For browser widths less than about 800 pixels a second row appears.
As it stands, this navbar is mobile-friendly (according to Google) so you would not need a ‘hamburger’ menu for browser widths less than 600 pixels. Of course you could still have a hamburger menu if you wish. In my view keeping all top-level menu options visible on mobiles is more likely to encourage visits other pages of your website.
To make maximum use of the browser width available, I have not made the menu items equal width.
3 Likes
There was an article on CSS tricks that explains how to do that.
2 Likes
Just wanted to chime in here and say that I never said CSS alone would fix it, but CSS is 90% of the solution. Everything you are talking about is presentation. You can move elements around visually with CSS in infinite ways. I think the other experts here are showing you this. I encourage you to look around on codepen.io at other examples people are doing. You will be surprised what you can accomplish with CSS alone.
1 Like
Your solution assumes that I know the width of the menu items, and that they won’t change…
Yes, that’s how I read the problem statement: 10 items, each 80px wide, and at 700px you want 3 of them to drop into a “more” menu. If the size of the items is changing as well, then I agree the problem is trickier
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.