For the complete documentation index, see llms.txt. This page is also available as Markdown.

Mobile Header

Configure the Avante mobile header: logo, hamburger menu, search, cart icon, and mobile-specific navigation layout.

A separate header section designed specifically for mobile screens. Unlike many themes that simply shrink the desktop header, Avante gives you full control over the mobile navigation — its own logo, layout, and set of elements.


How to find

Theme Editor → Header group → Mobile Header

Mobile Header is independent from the desktop Header. Changes to one do not affect the other.


The Mobile Header has its own Logo block. By default it uses the same image as the desktop header, but you can set a different logo height to better fit the smaller screen.

You can also switch the logo to text mode — useful if your image logo doesn't scale well on mobile.


Miscellaneous

Controls the icons and elements displayed in the mobile header bar — search, account, cart, and burger menu. The key setting worth noting:

Reverse order — flips the position of elements in the header. If your burger menu is on the left and cart on the right by default, enabling this swaps them. Handy for matching the layout conventions your audience expects.


Buttons

You can add up to two custom buttons directly in the mobile header — for example, a "Call us" or "Book now" link. Each button supports an icon, label, link, and style (solid, outlined, or text link).

sparkles

Same options as the desktop header:

Option
Behavior

Disabled

Header scrolls away with the page

On scroll to top

Header reappears when the visitor scrolls up

Always

Header stays pinned at the top

On scroll to top is the recommended option for mobile — it keeps the header accessible without permanently taking up screen space.


  • Header — desktop navigation bar

  • Menu Drawer — slide-out mobile menu (opens from the burger icon)

  • Appearance settings — navigation layout options

Last updated

Was this helpful?