Responsive Menu (using 2 kinds of menu)

overview

Wanting to create a much fancy menu but classic menu is limiting? Here we will show how to use 2 kind of menu and some simple steps of hide and show to create a responsive menu layout for you website

STEP 1

Drag & drop a classic menu (Horizontal Menu) and a burger menu into the page. Menu is located top left of the editor menu section title Object.

STEP 2

Select the burger menu, go to Properties > Arrangement > Display and set to "none". This will hide the burger menu.

STEP 3

Now change to tablet or mobile view by click on the the top right icon. As the burger menu is hidden you can call the setting window by double clicking the breadcrumb at the bottom (Click on the correct object to call the correct setting window). Then go to Properties > Arrangement > Display and set to "block". The burger menu will reappear.

STEP 4

Now to hide the classic menu, first select it and go to Properties > Arrangement > Display and set to "none" to hide the menu.

Related articles

Let's chat

+603.7955.5148

let us help you

Can't find what you're looking for?

Get in touch
Name
Email
Contact No
Company Name
Company Website
Where did you learn about XTOPIA?
Thank you

We will get in touch with you soon.

Ooops!
Generic Popup2