Muse Menu Smart is the best method of having a menu on phones and tablets. When users are viewing your site on a smaller screen, typically when they’re scrolling up, they’re trying to reach the top of the page to access the menu.
This Muse widget is great for use on mobile and tablet devices. It allows you to hide the menu when users are scrolling down, allowing users to focus on your content. The menu comes back into view, when users need it, as they scroll up.
It can also be used for desktop if you want to have your menu show up after the user scrolls a certain distance down your page. This could be useful for introducing the menu after a user scrolls past a header or photo. Or you could use Muse Menu Smart to always have your menu showing.
The widget option panel consists of two main sections. Each section is to control specific functionality. See the sections below, and click on each one to see the related documentation.
The Menu Graphic Style name must match the graphic style name of your menu. Keep the Menu Graphic Style name consistent and simple. Do not use any spaces, special characters, and/or non-English characters for the name.
The checkbox "Disappears when scroll down, appears when scroll up" can do two things.
Checking this box will cause your menu to disappear when you scroll down, and reappear when you scroll up. It is recommended that you leave this checked for mobile and tablet devices.
Unchecking this box will make it so that your menu is always showing. This is recommended for desktop.
Menu Smart also allows you to customize your menu even more by giving you the option to change how your menu is animated. Control how slowly or quickly your menu appears by changing the seconds with Animation Duration.
Control how your menu is animated with six different easing options:
Linear, Ease In, Ease Out, Ease In & Out, Ease Back, Ease Cubic
Get It Here
You may want to have your menu always showing on desktop, but hidden on tablet or mobile. With Muse Menu Smart, it’s easy to make your menu behave differently on desktop, tablet, and mobile devices.
Follow the steps below to have your menu hidden on mobile and tablet, but always showing on desktop.
1. Create menu in desktop breakpoint, assign a graphic style to it, drag menu smart onto canvas and give it the same graphic style name. Uncheck the box “disappears when scrolls down, appears when scrolls up” so that the menu is always showing.
2. Copy the menu in your desktop breakpoint and paste it into your tablet breakpoint.
3. In your desktop breakpoint right click on the menu and select “hide in other breakpoints”.
4. Go back to your tablet breakpoint and select your menu. Assign a new graphic style to it with a new name to differentiate it from the menu on your desktop.
5. Open the Muse Menu Smart options and change the name to the new name you just assigned to the tablet version of your menu.
6. Check the box “disappears when scrolls down, appears when scrolls up” so that the menu is hidden when users scroll down on your site.
Now when you preview your site, the menu should always be showing on desktops and it should be hidden when users scroll down on their tablets and phones.