Mobile navigation bar 🔥

Help users navigate effortlessly on limited mobile screens with an intuitive Mobile navigation bar

The Mobile navigation bar section is a fixed navigation menu that remains visible at the bottom of the mobile screen as the users scroll up/down.

A navigation bar helps your users navigate through your website with ease on limited mobile screens. It is different from the sticky header that appears on the top.

In this article, we will show you how to set up a Mobile navigation bar section.

The Mobile navigation bar feature is available on ✨ Sleek version 1.4.0 and above ✨

See Changelog.

Steps:

In the theme editor (Customize), click Mobile navigation bar.
Edit the settings.
Save the settings.

Section settings

Check the Enable mobile sticky bar box to show the sticky navigation bar on mobile to let customers shopping easier by ensuring it remains visible as users scroll through the page.

The Show button label is checked, making the label text (like "Home" or "Cart") visible below each icon for better clarity.

Block settings

This section has 4 pre-built blocks: Home, Products, Search, and Cart (each can only be added once).

You can add a maximum of 6 blocks, including 2 Custom link blocks.

Moreover, you have the flexibility to show or hide individual blocks based on your store's specific objectives.

Home: Get back to the home page (You can change the label text for this block).

Search: Open the search drawer and let customers search for products (You can change the label text for this block).

Cart: Open the cart drawer and let customers check the items they have added or check out (You can change the label text for this block).

Products: Redirect customers to the specific collection page (You can change the label text for this block).

If there is no collection selected, the button will be linked to "All" collection.

Custom link: Redirect customers to an attached link page as desired.

In the custom link block, you can edit three elements:

Title: Fill in the title of the section you want to add to the mobile navigation menu (this will be shown as the button label).
Link: Paste a link or choose the section you want to add to the mobile navigation menu.
Icon: Choose your favorite icon.