How to make my menu like on mobile version?

Shapely
1

Hello,

I have a lot of menu’s on my header so the result the menu doesn’t look good if I add some more. Then I’m thinking Can I change my menu like on mobile version?

Like image attached

Anyone can help me?

Thanks

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to have the menu icon on display by going to Appearance > Customize > Additional CSS and pasting it there.


.visible-lg, .visible-md, .visible-sm, .visible-xs {
    display: block!important;
}

.module-group.right {
    display: none;
}

Best Regards,
Support

3

It worked, But when I click my menu not showing up.

Thanks

4

Hello there,

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

5

Here http://propertybutlers.ae/

Thanks

6

Hello there,

Please remove the last CSS and try this set :


ul#menu {
    display: none;
}

.module.widget-handle.search-widget-handle.left.hidden-xs.hidden-sm {
    display: none;
}

.visible-lg, .visible-md, .visible-sm, .visible-xs {
    display: block!important;
}

.module-group.right {
    display: none;
}

.module.widget-handle.mobile-toggle.right.visible-sm.visible-xs {
    float: right;
    position: absolute;
}

.module.widget-handle.search-widget-handle.left.toggle-search {
    display: none;
}

Best Regards,
Support

7

Hello, I try this code but still nothing happens when i click the menu toogle

8

Hello there,

Did you remove the previous CSS code?

Best Regards,
Support

9

Hello there,

Please remove this code:


.module-group.right {
    display: none;
}

and add this one:


.module-group.right {
    display: block;
}

Best Regards,
Support

10

It Worked Thankyou!!

11

Hello there,

Great, I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support