Mobile header and footer issues

Hello guys! I’ve been trying to set up a new website and i’ve encountered some problems with the display on 480px and smaller screens. The menus look really messed up both in the header and the footer. I’ve attached pictures for both cases

What can i do to fix this? Also, wasn’t there supposed to appear a collapsing button automatically when loading the website on a small screen?

Thank you!

Hello @CristianD,

Thanks for writing in!

You will need to insert a navigation inline and a navigation collapsed or navigation dropdown element. The navigation inline element will be exclusively displayed for desktop screens and the navigation collapsed or navigation dropdown is for smaller screens. You can show or hide the elements by utilizing the “Hide During Breakpoints” option which you can find in the “Customize” tab of the element settings. To know more about “Hide During Breakpoints” options, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.

1 Like

Thank you so much @RueNel! Works like a charm!

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

1 Like

I have a bit of a problem though, i can’t see the “Menu” text near the Hamburger mobile button, it’s only partially visible. I’ve attached a picture

Is there any way i can fix this?
Thank you!

Hello @CristianD,

To resolve this, please edit your header and adjust the width of the toggle of your navigation.

We would loved to know if this has work for you. Thank you.

1 Like

It worked great! Thank you!

You’re most welcome!

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