> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nettify.no/llms.txt
> Use this file to discover all available pages before exploring further.

# Menu and navigation

> Add a menu, style it the way you want, and fix the mobile menu when it looks off

## The menu is the first thing customers use

The menu — also called the navigation or navbar — is the bar at the top of your website with links to your pages. It is what customers use to find their way around, and one of the clearest things separating a considered website from a generic one.

> [!NOTE]
>
> **No menu on your website?** That is perfectly normal on a first draft, especially if the site only has one page. You do not need a new draft — ask Nettify AI to add a menu and it will appear.

***

## Add a menu

> [!TIP]
>
> **Copy this prompt and paste it into Nettify AI:**

```
Add a menu at the top of the website with links to all the pages.

The menu should have:
- Our logo on the left
- Links to the pages in the middle or on the right
- A clear "Contact us" button on the far right in the accent color
- A hamburger menu on mobile

Design: clean and airy, with good spacing between the links. The menu should stay at the top when scrolling, and pick up a subtle shadow once you have scrolled down a bit.
```

> [!NOTE]
>
> Does your site only have one page today? Then the menu can link to the sections on that page instead — "Services", "About", "Contact" — and scroll smoothly to the right place. Ask Nettify AI for an **anchor menu** if that fits better.

***

## Style the menu

The menu usually inherits the colors from the rest of your website, but you can change all of it by asking.

> [!TIP]
>
> **Copy this prompt and paste it into Nettify AI:**

```
Change the design of the menu:
- Background: [e.g. white, dark, or transparent over the hero image]
- Link text color: [color]
- Hover effect: a thin line that slides in under the link
- The current page should be highlighted
- A bit more air between the links

Keep the rest of the menu as it is.
```

> [accordion] Transparent menu over the hero image
>
> The menu sits on top of the image at the top with white text, until you scroll — then it turns white with dark text. Gives a modern, polished impression.
>
> Ask for: "Make the menu transparent over the hero section with white text, and have it turn white with dark text when scrolling."

> [accordion] A menu that follows you as you scroll
>
> The menu stays at the top all the way down the page. Handy on long pages, because the "Contact" button is always within reach.
>
> Ask for: "Make the menu sticky so it always stays at the top when scrolling."

> [accordion] Logo in the center
>
> Links on either side of the logo. A classic move that suits salons, restaurants and brands with a strong visual identity.
>
> Ask for: "Place the logo in the middle of the menu with the links split on either side."

> [accordion] Floating menu with rounded corners
>
> The menu sits as its own "card" inset from the edges, rather than spanning the full width. Gives a lighter, more designed feel.
>
> Ask for: "Make the menu floating with rounded corners, a bit of space from the top and sides, and a soft shadow."

> [accordion] Dropdown for subpages
>
> If you have a lot of pages, they can be gathered under a single menu link that unfolds on hover.
>
> Ask for: "Gather the service pages under a dropdown in the menu called *Services*."

***

## Change what is in the menu

New pages are added to the menu automatically, but you decide what belongs there and in what order.

> [!TIP]
>
> **Copy this prompt and paste it into Nettify AI:**

```
Update the menu:
- Order: Home, Services, About, Gallery, Contact
- Remove the link to [page you do not want in the menu]
- Rename "[old name]" to "[new name]"
- "Contact" should be a button, not a plain link
```

> [!NOTE]
>
> Removing a page from the menu does not delete the page itself — it is still there, just not visible in the navigation.

***

## The mobile menu

On mobile the menu usually appears as a **hamburger menu** — the three lines in the corner that open the menu when tapped.

> [!TIP]
>
> **Copy this prompt and paste it into Nettify AI:**

```
Improve the mobile menu:
- Hamburger icon in the top right
- The menu should slide in from the right and cover the whole screen
- Large links that are easy to hit with your thumb
- A clear close cross at the top
- The "Contact us" button at the bottom of the menu
```

***

## The menu looks off on mobile — how to fix it

Sometimes the mobile menu does not turn out quite right: it opens halfway, the links sit outside the screen, or the text gets cut off in the middle.

This is quick to fix. Nettify AI **can see images**, so the most effective approach is to show the problem rather than describe it in detail.

**1. Take a screenshot of the problem**

Open the website on your phone, open the menu, and take a screenshot while the problem is visible. If several things are wrong, take one image of each.

**2. Upload the screenshot in Nettify AI**

Attach the image in the chat the same way you would upload any other image.

**3. Describe what is wrong in one sentence**

You do not need to explain why. Just say what you see: "When I open the menu on mobile, it gets cut off" or "The links in the mobile menu disappear off the edge of the screen".

**4. Let Nettify AI put it right**

Nettify AI looks at the screenshot, works out what is wrong, and fixes it. Check the result on your phone afterwards.

> [!TIP]
>
> **An example of a good instruction:**
>
> "When I open the menu on mobile it gets cut off on the right — see the screenshot. Fix it so the whole menu is visible and the links are easy to tap."

> [!NOTE]
>
> **Remember to say that it concerns mobile.** The website can look perfectly fine on a computer even when the mobile view has a problem. Mentioning mobile tells Nettify AI where to look.

### Common mobile menu problems

> [accordion] The menu is cut off or runs outside the screen
>
> Ask for: "The mobile menu gets cut off on the right when I open it. Make sure it stays within the screen width on all phones."

> [accordion] The menu does not open when I tap it
>
> Ask for: "The hamburger menu on mobile does not respond when I tap it. Fix it so the menu opens and closes properly."

> [accordion] I cannot close the menu again
>
> Ask for: "Add a clear close cross at the top of the mobile menu, and have the menu close automatically when a link is tapped."

> [accordion] The content behind the menu scrolls while the menu is open
>
> Ask for: "When the mobile menu is open, lock the page behind it so it does not scroll."

> [accordion] The links are too close together to hit
>
> Ask for: "Make the links in the mobile menu bigger and add more space between them, so they are easy to hit with a thumb."

> [accordion] The menu sits on top of the content
>
> Ask for: "The mobile menu overlaps the text on the page. Make sure it sits on top with its own background, so the content behind does not show through."

***

## Always test on mobile

> [!WARNING]
>
> **More than half your visitors are on a phone.** Once you have changed the menu, open the website on your own phone and tap your way through it. It takes half a minute, and it is the only way to be sure the menu works the way customers actually meet it.

> [!NOTE]
>
> Want to fine-tune the menu's colors, spacing or sizes entirely yourself? That is done in manual editing — on a computer in the **Manual editing** tab, on a phone under **View** → **Edit**. See [Manual editor](https://docs.nettify.no/en/redigering/manuell-editor.md).

> [card] [Create a new page](https://docs.nettify.no/en/ai/lag-ny-side.md)
>
> New pages are added to the menu automatically. See how to expand your website.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.