Footer menu has disappeared

Hi. I just realised the menu footer has disappeared.

However, it’s enabled on the options:

This is the current footer:

Why the menu footer is not being shown?

Maybe it’s because I need to add it in Pro as well? If so, how?

Thanks for your help!! :slight_smile:

Carlos

Hey Carlos,

If you create a Pro Footer and assign it globally, it will remove the Original Footer including the Footer Menu. You will need to add a Navigation Inline to the Pro Footer.

Hope that helps.

1 Like

Thank you very much for your answer! Now I find myself with a new problem and that is that I don’t know how to make a line jump between links since they are quite a few and this means that the beginning and end are contained due to the dimensions of certain devices such as tablets and phones.

Can you help us?

Hello @educainventions,

Would you mind providing more information about which link you are referring to?

If it is those links that show up when you hover a link item, please check the Interaction Setup of the Navigation Inline element.

Hope this helps.

Hello again! Thank you for your response, I attached a photo so that you understand what links I mean.

I added the footer with the links in the way they told me using a navigate line but those same links are cut off on mobile and I don’t know how I can do a line break for example to avoid those problems. Thank you! I am looking forward to your response!

Hi @educainventions,

Please inspect your Navigation Inline and set its Flexbox to Wrap.

If the issue persists, please provide us login credentials in a secure note so we can take a closer look.

Thanks,

Thanks… It doesn’t work yet:

Hello @educainventions ,

When you enable the wrap option, you also need to change the alignment and the self-flex.
Different self-flex and alignment combination displays a different results for the menu items.
gzzWNMIDTgGc7wYs36Qu7A

To learn more about how the Flexbox layout works, please check this documentation:

Please check your footer now.

Hi. We still have the same problem: the text size become so small that it’s impossible to see on mobile

So how to break into 2 or more lines like the default WordPress footer menu? I mean, similar to the WPLM languages bar behaviour. I mean, we do NOT want to reduce the text size at all!!

Remember I shared our login data in a secure note in our previous message.

Hello @educainventions,

Your font size is small because of your varying font size.

Your bar setting font size:
2ze4U_QWSJaZocRetoO6Cg

Your base font size in the navigation inline:
U_1R7WrLTTuj9KXG5MJAnw

And then in Pro > Theme Options > Typography settings you have these:

Please use px as your root font size units. Usually 16 pixels is the default root font unit. And then your base font size across all elements should be 1em only. To learn more about the Typography settings, please check out:

You might be interested about the Responsive Typography as well. Please check this out:

Hope this helps.

Where can I find it? (I don’t find it anywhere) :slight_smile:

But more importantly: how to break the menu into 2 or more lines like the default WordPress footer menu? I mean, similar to the WPLM languages bar behaviour.

Thanks!!

Carlos

I found navigation inline!

But, how I said. That’s NOT the problem.

The problem is that the menu bar should be divided in several lines in mobile. How to do it?

Hi @educainventions,

You’ll need to use two different menus, navigation inline for desktop, and navigation collapse for mobile. It’s the same with standard header (different menu for desktop and mobile), but it’s just automatic. And with custom header, you’ll have to do it manually.

You can control the visibility of each menu element by utilizing the HIDE DURING BREAKPOINTS feature. Please check this for more information https://theme.co/docs/hide-or-show-content-by-device-size

Thanks!

We are already doing that as you can see (I shared login credentials on a secure note previously) :slight_smile:

So how to split in two lines as described before?

Thanks

Carlos

Hi Carlos,

Sorry for the confusion, yeah I tested this on my local dev and its kind of tricky to do it with one navigation inline element only, So let’s do it this way, duplicate your Inline Navigation element, using the Hide During Breakpoints feature, hide the duplicate navigation inline on Extra Large, Large, and Medium screen, do the opposite on the original navigation inline, hide it on Small and extra small screen. This way the two navigation elements will not show at the same time.

Then inspect the duplicate Inline Navigation and set its Flexbox’ Child Placement to Column.

This should make the menu stack instead of inline. Then adjust the other flexbox option appropriately (e.g. align horizontal, align vertical, etc.).

These two Inline Navigation element approach gives you more flexibility on how you configure your footer menu for desktop and mobile view (e.g. adjusting the font-size appropriately).

Hope it helps,
Cheers!

It’s weird the credentials don’t work. Anyway, I’ve reset the password and double check if it works. You should be able to enter. Find the password in a secure note :slight_smile:

As I said, we have a lot of inline elements and we hide them depending of the device.

But that’s not the problem

I hope you can enter now and see :slight_smile:

Hey Carlos,

Credentials work now. Your setup should be as follows. The main thing you should learn is Flex. See https://theme.co/docs/use-flex-layout

image

Hope that helps.

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