Mega Menus, Sticky Headers and Mobile Nav in Dubai

Navigation is where a lot of otherwise careful Dubai sites go noisy. A sticky header that covers the floating WhatsApp. A desktop that only offers a hamburger, as if the visitor were on a watch. A mega menu with forty links, including ISO 9001, careers from 2019, and three ways to say Contact. People do not “explore information architecture.” They try to find the thing they Googled, then they try to tap. If the menu fights the thumb, the design already lost.

I keep nav boring on purpose. Boring is fast. The first-screen job is still the offer, which I wrote about in the five-second homepage. The menu’s job is not to impress. It is to get out of the way until it is needed, then to be obvious. That is part of web design in Dubai, not a plugin setting you pick because a theme demo looked busy.

Sticky headers that steal the chat button

A thin sticky header can help: logo, one primary action, menu. A thick one that includes a promo strip, a language switch, social icons, and a second row of links eats a third of a phone. Add a cookie banner and a circular WhatsApp widget in the same corner and you have a collision. I have watched people tap the widget and hit “Accept cookies” instead. That is not a cute analytics event. That is a missed lead.

• Keep sticky height small on mobile. Logo plus menu plus one button is enough.
• Reserve a corner for WhatsApp and do not cover it with the header on scroll.
• If you must run a promo bar, let people close it, and do not restick it every visit.
• Test with the iOS bottom chrome and an Android navigation bar. Real devices, not only a desktop preview.

If the brand insists on a tall header for “presence,” make it static. Presence that hides the product is advertising, not navigation. On Etisalat or du, the visitor is often one-handed. Give them a target they can hit without hiding the page they came to read.

Hamburger-only desktop is not minimalism

Hiding every link behind an icon on a 27-inch monitor is a fashion choice from a time when blank space was the product. In a service business it reads as “we have something to hide” or “we did not decide the pages.” Show Home, the two or three services that pay the rent, About if it helps trust, and Contact. Secondary items can sit in a more menu. The icon-only pattern belongs on small screens, where space is actually scarce.

If your desktop nav is already a hamburger because the mega menu would not fit, that is a sitemap problem. Too many top-level items. Cut. Group. Do not invent a mystery drawer. People look for words. They do not look for three lines in the corner of a cinema-wide hero.

Mega menus with forty links

A mega menu can be justified for a university, a large retailer, or a hospital with many departments. It is not justified for an eight-page contractor site. If you truly have that many destinations, group them the way a person thinks: by audience, by campus, by product family — not by internal department codes. On mobile, do not scale the mega menu down. Replace it with an accordion list. Tiny columns of links are unusable with a thumb.

What I refuse to put in nav

PDF policies, expired awards, “ISO 9001” as a top-level item, the same Contact three times, and social networks that open as if they were pages. Footer can hold the legal stuff. The header is for getting to the offer. If you need a sitemap page for Google and for lost humans, we can have one. It should not be the primary UX.

Hover versus tap

Hover mega menus fail on touch laptops in Dubai offices as often as they fail on phones. If a group has children, make it open on click, and make the parent item either a real page or a label, not both by accident. “Services” that goes to a blank landing and also opens a mega panel is how people miss the list. Pick one behaviour and test it on a real iPad.

A practical pattern I use

Mobile: logo left, WhatsApp or call as text or icon, menu right. Menu opens a full-height panel with large rows, language switch at the bottom, and the phone number repeated. Desktop: five or fewer visible links, one button that matches the page’s primary action, no second sticky row. If the company has many services, one “Services” click-panel with groups, not forty equal links. Arabic RTL reverses the chrome without shrinking the tap targets.

Deep links in ads should land on a page that still has a way back without the mega menu. Paid traffic plus a maze is how budgets vanish. The same discipline as a landing page: one path. Navigation can exist. It should not compete with the thing you paid for.

If you already have a live site, I will open it on my phone on mobile data before I argue about Dribbble. That is the review. You can send the URL on WhatsApp or through contact. We will fix the collision between header, cookies and chat before we talk about animating the menu icon. Animation is not navigation. Navigation is finding Contact without a treasure hunt.

Frequently asked questions

Are mega menus bad for Dubai websites?

They are bad when they dump 40 links on a phone or replace a clear offer. They can work for a large catalogue if the groups are real and the mobile version is a simple list, not a tiny replica of desktop.

Should the header stay sticky?

A thin sticky bar with logo, one action and a menu can help. A tall sticky banner plus a cookie strip plus WhatsApp is how you hide the page.

Is a hamburger menu OK on desktop?

Not as the only way to find Home, Services and Contact on a wide screen. Hide secondary links if you must. Do not hide the whole site behind an icon because it looked minimal in a Dribbble shot.