ThisCalculator

Everyday

Hostinger AI Builder: Move Menu Items Without Nesting

Updated · Standard formula, shown below

Hostinger AI Builder: Move Menu Items Without Nesting

Yes, you can move menu items in Hostinger’s AI Website Builder without nesting them. The builder’s menu editor lets you drag items vertically to reorder them, and items stay at the same level unless you deliberately drag them to the right to create a submenu. This guide explains exactly how to do it, what to watch out for, and answers common questions about menu management in Hostinger.

How the Hostinger AI Builder Menu Editor Works

The menu editor in Hostinger’s AI builder is a simple drag-and-drop interface. When you open the menu settings, you’ll see a list of your menu items. To move an item without nesting it, you click and hold the item’s handle (usually six dots on the left), then drag it up or down to the desired position. The key is to drag straight up or down — if you drag slightly to the right, the item will become a submenu of the item above it. If you accidentally nest an item, you can drag it all the way to the left edge to un-nest it.

Step-by-Step: Move a Menu Item Without Nesting

  1. Open your Hostinger AI builder project and click on the Menu section in the top bar (or the menu icon on the preview).
  2. In the menu editor panel, locate the item you want to move.
  3. Click and hold the drag handle (six dots) on the left side of the item.
  4. Drag the item straight up or down to the new position. Do not move it left or right.
  5. Release the mouse button. The item will now appear in the new position, still at the same level.
  6. If you see a small indentation or a parent-child arrow, you’ve accidentally nested it. Drag it left to the edge to un-nest.

Why Does Nesting Happen? (And How to Undo It)

Nesting happens because the drag-and-drop interface interprets horizontal movement as a signal to create a submenu. If you drag an item even a few pixels to the right while moving it vertically, the builder will make it a child of the item above. This is a common frustration. To undo it, simply drag the nested item all the way to the left edge of the menu list until it aligns with the other top-level items. The indentation will disappear, and it will be back to a standalone menu item.

What If Drag-and-Drop Doesn’t Work? (Alternative Method)

Some users report that drag-and-drop can be finicky, especially on smaller screens or when using a trackpad. If you can’t get it to work, try these alternatives:

  • Use the arrow buttons (if available) next to each menu item to move it up or down. These buttons move the item without changing its nesting level.
  • Edit the menu structure manually by clicking on the item and using the “Move up” or “Move down” options in the item’s settings.
  • Delete and re-add the item in the desired position. This is a reliable fallback if dragging is not cooperating.

Common Problems and Fixes

  • Item keeps nesting when I drag it. Make sure you are not moving the mouse horizontally. Try using the arrow keys or the move buttons instead.
  • Menu items disappear after moving. This usually means you accidentally nested them under a hidden item. Check for indentation and drag them back left.
  • Changes not saving. Always click the “Save” or “Publish” button after editing the menu. If the preview doesn’t update, refresh the page.
  • Can’t drag at all. Try a different browser (Chrome or Firefox) or disable browser extensions that might interfere with drag events.

Tips for Organizing a Flat Menu

If you want a completely flat menu (no dropdowns at all), keep all items at the same indentation level. Use clear, short labels that fit within your header width. Remember that too many items can clutter the header — consider grouping related pages into a single “More” or “Services” page if you have more than 7-8 items. Use the preview mode to test how the menu looks on mobile, where items often stack vertically.

Frequently Asked Questions

How do I un-nest a menu item in Hostinger AI builder?

Drag the nested item all the way to the left edge of the menu list until it aligns with the other top-level items. The indentation will disappear, and the item will be at the same level as the others.

Can I reorder menu items without using the mouse?

Yes, if the menu editor has up/down arrow buttons, you can use those. If not, try using keyboard shortcuts like Tab to focus the item and arrow keys to move (if supported). Otherwise, delete and re-add the item in the desired position.

Why does my menu item become a dropdown when I move it?

Because the drag-and-drop interprets horizontal movement as a nesting command. Even a slight move to the right will create a submenu. Drag straight up or down, or use the move buttons.

Can I have a menu with no dropdowns at all?

Yes, simply keep all items at the same level. Do not drag any item to the right. If you have accidentally nested items, un-nest them as described above.

Does Hostinger AI builder allow me to create dropdown menus?

Yes, it does. To create a dropdown, drag an item slightly to the right under the parent item. It will become a submenu. You can nest multiple levels, though it’s best to keep it to one or two levels for usability.

What if my menu changes don’t appear on the live site?

Make sure you click the “Publish” or “Update” button after making changes. Also, clear your browser cache or view the site in an incognito window to see the latest version.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.