How do I get MENU styles to always display correctly per device - DESKTOP VIEW
I have encountered numerous examples in which the styles I've used especially ones related to the nav menu can display awkwardly on smaller laptop screens if I'm working on the site using a larger monitor - So there have been cases where the desktop display drops some of the menu tabs down to a second line - I've then modified the link text font size to accomodate these popular devices, however now the 11px or 10px fonts look tiny on a larger desktop display. Is there a workaround for this? Is using the newer "Responsive Desktop/Tablet" development mode easier to render sites that display uniformly across smaller laptop screens as well as large monitors?
*On larger monitors the issue in the picture is not present.
Best Answers
-
@chrissilva80 unfortunately, achieving the same level of responsiveness in the header as you can with flex is a challenge. However, I'd like to offer a few suggestions that might alleviate the issue:
Suggestion A: Consider relocating either "Energy Rebate Consultation" or "Contact Us" to the blue bar, transforming it into a prominent button to enhance its visibility.
Suggestion B: You might explore reducing the font size and minimizing the spacing between page titles within the navigation bar.
Option C: Consider is redesigning the navigation menu. This could involve simplifying it to include Home, Services, Energy Rebate Consultation, Case Studies, and Contact as primary pages, while listing LED Lighting, Electrical Contracting, and IT Structured Wiring and Cabling as sub titles.
I agree these may not be ideal solutions but I hope it helps.
2 -
As others have mentioned, @chrissilva80, this is a Design issue, not a 'technical' one, so what you need is a Design solution here.
Let's say that I approach you, and I tell you that "I have these 20 pages that I'm listing on my menubar, but they don't fit on one line, so the menubar looks terrible. What can I do?" - sounds silly, but by exaggerating the problem, sometimes it's easier to see the possible solutions. Here are some suggestions:
1. Re-structure the site (and the menu): the menu should (somewhat) reflect the structure of the website itself. If the site has more than 3-4 pages, at the top level, I might only have menu items for each 'area' of the website - eg., 'Services', 'Products', 'About Us', 'Blog', etc. While some of these 'areas' might contain only one page, others might contain more, and therefore will turn into submenus. That is the 'traditional' way of organising a website, and visitors respond well to that - because they are more likely to intuitively know where to look for the information they need. In your specific case, for example, it sounds as if the client offers both "Services" ("Electrical Contracting", "Energy Rebate Consultation") and "Products" ("LED Lighting", "IT Structured Wiring & Cabling"), so perhaps you could put those pages in submenus as such. Otherwise, if they see all their offerings as one single 'category', you could just put the 4 items together into a single submenu - eg. 'What We Do'.
2. Start using a Hamburger Menu earlier: in most well-structured menus, you can have your menu items display comfortably on both desktop and tablet-sized viewports without too much struggle. But on mobile, you will almost always need to hide the menu behind a 'hamburger toggle', as it will never fit more than just 1 or 2 words/items. Well, if your menu starts 'not fitting' already on tablet, then switch to using the hamburger toggle on tablet, too - don't wait for mobile. You can always do it sooner, and in fact there are sites that use the hamburger menu on all devices — even on desktop.
3. Use a Sidebar Menu: sometimes, it is easier to fit a larger amount of menu items - and menu items with longer titles - on a sidebar, rather than a header, so don't hesitate to experiment with your navigation menu design options.
4. Use Icons for well-known items: in some cases, you can replace well-known menu items with icons, which take up less space. For example, a 🏠 instead of the word 'Home', or 📞 instead of 'Contact Us'. When using icons, it's always a good idea to also give the visitor some kind of visual confirmation that they're assuming correctly what the icons mean - eg., by using a tooltip.
5. Use shorter titles: If we have a top-level menu item titled "General Questions, Information and Enquiries", it is likely to cause us space problems. If possible, we should try to shorten it - 'Questions', or 'More Info' would probably do. We could then display the original title using a tooltip, if needed. In your case, you might be able to re-title some of your items to simply "LED", "Contracting", "Cabling" and "Rebate Consult", for example.
Because we're dealing with a Design issue, the possible solutions are going to be many, and can be as creative as you want. I hope these suggestions might help a little!
0
Answers
-
Sadly, until Duda allows flex headers, you will have to deal with that.. Best practice would say use smaller page titles for the nav items or place them in a folder as a dropdown.
0
