From Uncode 2.8.0, it is possible to choose between three mobile Menu layouts, ensuring an immersive and user-friendly mobile experience for your website visitors.

Default

The Default layout offers a friendly and straightforward approach to mobile navigation. The Menu is at the top of the screen, providing easy access to your website's sections and content. This classic layout ensures seamless navigation and familiarity for users who prefer a traditional mobile Menu placement.

• Active it with Menu Sticky Mobile → Off, screenshot ;
• Activate it also with Menu Sticky Mobile → On, and Menu Mobile Style → Default , screenshot ;

With this type of Menu Layout in Customize → Menu → Mobile Menu Font Size and Mobile Submenu Font Size, we recommend using units in pixels, screenshot ;

Centered

The Centered layout is ideal for those seeking a visually captivating mobile Menu. With this layout, the Menu appears in the center of the screen, creating a sleek and symmetrical design. This visually stunning approach not only enhances the aesthetic appeal of your website but also enables effortless navigation with its prominent positioning. 

• Active it with Menu Sticky Mobile → On, and Menu Mobile Style → Centered, screenshot ;

With this type of Menu Layout in Customize → Menu → Mobile Menu Font Size and Mobile Submenu Font Size, we recommend using units in viewport width, screenshot ;

Off Canvas

The Off Canvas layout introduces a modern and dynamic mobile Menu experience. When activated, the Menu elegantly slides in from the side of the screen. This layout optimizes screen space, allowing your content to take center stage while providing users with a convenient and interactive Menu.

• Active it with Menu Sticky Mobile → On, and Menu Mobile Style → Off Canvas, screenshot ;

With this type of Menu Layout in Customize → Menu → Mobile Menu Font Size and Mobile Submenu Font Size, we recommend using units in viewport width, screenshot ;

Visual/Behavior Options

In addition to these layouts, Uncode provides customization options, enabling you to refine your mobile Menu behaviors. Please find here the most important options:

• Menu Mobile Transparency: activate the Menu transparency when possible, screenshot ;
• Menu Hide Mobile: activate the autohide Menu on mobile devices. This is a Menu that is hiding after the user has scrolled down the page, screenshot ;
• Menu Mobile Transparency on Scroll: enable this option to have a transparent Menu on the Mobile, even when scrolling the page. This option works only combined with Sticky Mobile or Hide Mobile settings. With this option enabled, the Menu will change Skins automatically with the Skin of the adjacent main Row/Column, screenshot ;
• Menu Mobile animation: specify the Menu items animation when opening, screenshot ;
• Extra Icons Mobile Menu: show the Cart, Account, and Search icons in the Menu bar when the layout is on mobile mode, screenshot ;

Customise

In addition to these behaviors, Uncode provides controls for styling, ensuring a mobile Menu that aligns perfectly with your brand identity and user experience goals. Please find here the most important options:

• Primary Menu Skin: Specify the Primary Menu Skin, screenshot ;
• Primary Submenu Skin: Specify the Primary Submenu Skin, screenshot ;
• Mobile Menu Font Size: Set the mobile menu font size, screenshot ;
• Mobile Submenu Font Size: Set the mobile submenu font size, screenshot ;