How the site looks on a phone and how the mobile menu works

On a narrow screen — up to 768 pixels — the top menu rearranges itself, no setup needed:

• the header keeps only the logo and the greeting, with a “hamburger” button on the right;
• when tapped, the other items expand as a list under the header: a full-width row, centered text, thin lines between rows;
• tapping again or tapping elsewhere closes the list;
• a long greeting that doesn’t fit next to the logo wraps entirely to a second line, and the button stays to the right of the logo.

Which items stay in the header can’t be configured: only the logo and the greeting. Everything else in the top menu is inside the list.

Logo. On a phone it is fitted to the width, and the height from the styles window becomes its limit. There will be no extra empty space above and below the logo.

How to check. Open the site on a phone or narrow the browser window. On a phone, the admin mode switch button appears as a circle next to the “hamburger”.

If it didn’t work

• On the phone the site is tiny, like on a computer. Refresh the page with a cache clear: the phone may have saved an old version of the page.
• The page scrolls sideways. A wide element in the text is the cause — a table or a block with a width set in pixels. Reduce the width or set it in percent.
• The button you need is hidden in the “hamburger”. For example, “Install app”. Put it in the footer or as a section on the page.