Footer menu

[shintaro adachi]

Dear Bill,

I would like to add menu in footer.

I know I can do it from theme > menu.
But The text come out on the website in one word and does not look nice.

If I could add 15 links in three columm, that would be very happy.

Do you know how to do it??

Best regards,
Shintaro

[Bill Robbins]

Good Morning Shintaro,

Excellent question there. The footer menu was originally designed for social icons. It can be changed to work in three columns though. To do that, I would add in a widget area to the footer. Then create three separate menus; one for each column. Then add three Custom Menu Widgets to the new footer widget area and select your new menus for them. That should give you three columns of links in the footer.

Here are the changes you’ll need to make:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose functions.php
3. Scroll down to the very bottom and add this:

   
   (Copy all code directly from the support site and not the notification email.)

   and save your changes. That will create the new widget area in the admin for you.

4. Next edit the footer.php file. Replace all the code there with this:

   and save your changes.

5. Lastly go to the Theme Options page and select the Advanced tab. Scroll down to the Custom CSS box and add this:

   
   footer#site {
   	display: block;
   	
   }
   
   footer#site ul {
   	list-style-type: none;
   }
   
   .footer-left {
   	display: inline-block;
   }
   
   .footer-right {
   	display: inline-block;
   	float: right;
   }
   
   .footer-right .widget {
   	width: 120px;
   	display: inline-block;
   	margin-left: 15px;
   }
   

6. Update your settings.

That should let you add in widgets to your footer now. You can use them to create three columns of links by using three of the custom menu widgets.

You can also make these changes in a child theme which will be helpful with future theme updates.

If you have any questions or trouble, let me know.

Thanks,
Bill

[shintaro adachi]

Dear Bill,

Thank you very much. I could do it!

[shintaro adachi]

Dear Bill,

Actually I could not do it well.

It does not look good in my website.

Which part did I make mistake?

Please help me…

[Bill Robbins]

Hello Shintaro,

Sorry for the trouble there. I took a look this morning. I’ve attached a screenshot of what I’m seeing in your footer now. It looks like what I had in mind here. Are you looking for something else? Let me know and we’ll go from there.

Thanks,
Bill

Attachments:

1. 

   Screen-shot-2015-07-17-at-8.48.57-AM-1060-x-263.png
   

[shintaro adachi]

Dear Bill.

Yes I want my menu above the copy right and company information.
which is left side of the picture you attached, right side links are my menu.

I want menu full widhth in the page.

Could you help me?

Shintaro

[Bill Robbins]

We can do that. We’ll need to edit the footer.php file again to move the widgets so they can be above the company information. Replace all the content in the footer.php file with this:

You’ll also need to add some CSS to the Custom CSS in the Theme Options so that the widgets line up like they should.

#footer-widgets {
	margin-bottom: 30px;
}

#footer-widgets .widget {
	width: 32%;
	margin-left: 0;
	margin-right: 2%;
	float: left;
}

#footer-widgets .widget:last-of-type {
	margin-right: 0 !important;
}

@media only screen and (max-width: 767px) {

	#footer-widgets .widget {
		width: 100%;
		margin-right: 0;
		float: none;
	}

}

See how that works out for you now. Let me know if you have any trouble.

Bill

[shintaro adachi]

Dear Bill,

Thank you.

I could do it.

but one more thing could I ask?

I use widget now. if I try to use short code to make three block like now,
it shows up squeezed to the left only.

I may want to try four blocks in the future.
Could you help me too??

THank you,
Shintaro

[Bill Robbins]

Good Morning Shintaro,

I believe I understand what you mean. I created this widget area to have three columns of widgets. If you’d rather add the columns inside of a single widget, you can. Replace that last CSS that I sent over with this:

#footer-widgets {
	margin-bottom: 30px;
}

#footer-widgets .widget {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	float: none;
}

That should give you a widget that spans the full width of the footer. You can then add columns inside that widget if you’d like to.

Let me know if you have any trouble.

Thanks,
Bill

[shintaro adachi]

Dear Bill,

This is perfect.
Thank you!
Shintaro

[Bill Robbins]

That’s wonderful. Let me know if you need anything else.

[Author]

Posts