Header to shrink menu into a hamburger icon in mobile view

Support
#1

Hello team! Good day!

Would like to know any CSS we can use to shrink the Header menu into a hamburger icon in mobile view? Then when clicked, all menu links will show in a dropdown or pop-up page.

I am using x-pro - integrity
Header is Pro-Header sticky

Any guidance is much appreciated! Thanks a lot!

Regards,

#2

Hey @streetlifebahrain,

Regretfully, there is no option to shrink the Navigation Inline element. What you can do is hide the Navigation Inline element on mobile screens using the Hide During Breakpoints feature. For more details, please see https://theme.co/docs/hide-or-show-content-by-device-size

Then, add a Navigation Layered element in the same Container as your Navigation Inline then still using the Hide During Breakpoints feature, hide the Navigation Layered element this time on Desktop / Laptop screens.

Hope that helps.

#3

Hmmm… thanks a lot for this recommendation. We will try this one out and see. Regards!

#4

Hi @streetlifebahrain,

You are most welcome, please let us know how it works for you.

Thanks

#5

Hi @tristup, got it! Thanks a lot! This is really nice!

#6

Hi @streetlifebahrain,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.