Sub links under Footer Navigation Inline element

[physx]

Hello, I’m trying to achieve footer like as shown in screenshot below using Pro Footer, where each heading has certain links under it. So for example, Products has payments, billing, connect while Developers has documentation, API reference, etc.

For this I’m trying to utilize Navigation Inline element. However, I can’t figure out how to insert the nested pages (already nested in Wordpress Menu) underneath it.

If this cannot be achieved by Navigation Inline, can you please suggest as to how should I go about to get the desired footer?

Thanks!

[rad]

Hi @ngrhd,

Thanks for reaching out.

What do you mean by nested pages? Nested pages are sub-menus that aren’t applicable for the design mockup that you have provided. What I see are headline elements and inline menus. Example, 4 columns, there will be 4 headlines, and each column there going to have an individual inline menu.

Hence, you’ll have to create menus in Admin > Appearance > Menus as much as you need for each column. Is that what you’re trying to achieve?

Thanks!

[physx]

It seems I wasn’t clear enough. Apologies. What I want to achieve is the footer with 4 columns (headings and hyperlinked text underneath) as shown in the screenshot. What’s the best possible way to achieve the same?

[friech]

Hi @ngrhd,

Please see this screenshot, this will be the wireframe of your footer.

The red box is the overall bar, set your bar height to auto so it will be responsive. Inside the bar there will be containers (green boxes), setup the Containers’ Flexbox options like this:

Inside the Containers, there will be Headline element (red underlined) and Navigation Inline element (blue boxes), setup the Navigation Inlines’ Flexbox Placement option to Column so the menu-items will be stack.

And like Rad said above the menu items can be managed under Appearance > Menus

The two texts on the first container can be a button if those need to be a link, or headline element if it just a text. Both of these elements have a graphic option so you can easily append an icon before the text.

These might not give you the exact look that you envision immediately, but if you followed properly this will give you a solid head start on creating your footer.

Hope it helps,
Cheers!

[physx]

Amazing! I was able to replicate a lot by using your gold-standard guidelines!
However, there’s a small issue, when I try to resize the page to wobile viewports, the last 2 columns donot shift down but club with each other resulting in illegible texts as shown below. How can I prevent by shifting last 2 columns (out of 4) down the first 2?

[ruenel]

Hello @ngrhd,

One thing to note with the footer builder, the containers used as columns will be good only for desktops. The footer bar containers does not have a layout manager that you can easily set 4 columns for desktops, two columns for tablets and 1 column for smaller screens. As you can see in your footer, as the screen gets smaller, you still have four columns and it gets narrower. Now to get around this, I want you to utilize the Global Blocks in Pro > Global Blocks. You will have to create a global block and insert a section, row and columns. In your row settings, you can easily set the number of columns for the respective screen sizes as shown below:

• 
• 

You will actually create how the footer will look like in the global block. Once you are done, you can take the global block shortcode and then edit your custom footer. In the footer builder, instead of having 4 containers, you will have to remove the three other containers. Only set up one container and insert a content area element. Use the global block shortcode in the content area element “content” to display your footer.

Having to do create your custom footer like this, you will have a full responsive footer columns that will adapt to whatever screen size. To learn more about Global Blocks, please check this out:

• https://theme.co/docs/global-blocks

Hope this makes sense to you.

[physx]

Thank you!

I’ve started making everything on Global Block now. However, there’s an issue with the last column which does not stretch when attached on footer.

When designing the rows and colums on Global Blocks editor the blog widget seems to get equal space but for some reason, it wont stretch completely to it’s size when the whole block is itself attached to a footer, as if some hard coded value is stopping Global Block element to stretch fully.

Here you can see the blog element won’t stretch fully.

The following screenshot shows that blog widget does indeed stretch fully to the available screen estate when designing on Global Blocks editor.

For a reference, here’s the one that I designed using bar-container approach, wherein, the blog widget was working flawlessly but the global blocks paradigm seems a little problematic.

What could be the problem?

[ruenel]

Hello @ngrhd,

In the global block it stretches the whole screen. Please check your row settings. The Global Container option should be turn ON or at least have a width and maximum width:

• 

• 

If this is NOT helping, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support

Best Regards.

[physx]

Hi, I tried both methods but they are unfortunately not helping, I’ve attached relevant details securely with this reply.

[ruenel]

Hey @ngrhd,

The given credentials is not working for us.
Please double check.

Thanks.

[physx]

It should work, I’ve reapplied the changes with the same credentials. Please check now.

Thanks!

[rad]

Hi @ngrhd,

It’s due to flex styling of the footer layout. Please edit your footer bar and change its horizontal alignment to stretch, then apply same stretch alignment for footer bar container.

Footer bar

Container

That should make the content layout fill the entire width.

Thanks!