Stack footer menu

[zero_to_one]

Hey there,
I’am trying to make my footer menu look like this http://fuza.webflow.io/
I tried building it myself and now I’am not sure if I did it right, because the nav elements are cut off on mobile and are not being stacked.
Thanks for your help!

[christian]

Hey @zerotoone.de,

The Nav elements does not automatically stack to one column because they’re using Flexbox. Please add this code in the Element CSS of the Navigation Inline element.

@media (max-width:480px) {
  $el.x-menu {
    flex-direction: column;
  }
}

Make sure the **Wrap Children" option under Menu > Setup > Flex Layout is not checked and your Bar’s Height is set to auto.

[Album] Imgur

Hope that helps.

[zero_to_one]

thank you, I tried it but it did not help

[ruenel]

Hello @zerotoone.de,

Thanks for providing the information. I went ahead and edited your footer.
This is what I did.

• I duplicated the navigation inline element
• The first one will be exclusively available for desktop screens
• The second navigation element is meant for smaller screens. All of this is made possible by utilizing the “Hide During Breakpoints” option in the “Customize” tab. To know more about the “Hide During Breakpoint” option, you can check it here: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378
• Lastly, I have change the Flex Layout of the second navigation inline element to “Column”.
  

Please check your footer now.

[zero_to_one]

@RueNel

https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

the one for desktop wont be loaded in the background if a mobile. so this wont influence my pages file size?

[jade]

Hello @zerotoone.de,

The suggestion made by Ruenel will have two navigation inline elements in the footer area it’s just that only one will display depending on which device the site is loaded. This should not have any astronomical effect in your page speed as this is a small element on the page.

But, if you only want to have one Navigation Inline element on the page, you may follow the suggestion made by Christian but update the code to:

@media (max-width:480px) {
  $el.x-menu {
    flex-direction: column !important;
  }
}

Please make sure to place that code in the Element CSS of the Navigation Inline element in the footer.

Hope this helps.