Main Menu repeated in the footer

[Matthew Hallock]

Hi Bill,

I would like the footer in my website to repeat the main navigation menu in simple type. This way users can get to pages using the top nav bar or they can click on the page names in the footer to access them. Do you know how I could go about doing this?

Thank you

[Bill Robbins]

Matthew,

Good question. I don’t have a built in footer navigation menu for the Agency theme but we could always add one.

It would probably work best to replace either the left hand side footer text or the social icons on the right. If you’ll let me know which way you’d like to go, I’ll send you details on how to make that happen.

Thanks,
Bill

[Matthew Hallock]

I was really hoping that it could go into the center of the footer between the left text and the social links but if really cannot be done then we can replace the social links on the right.

Thank you for your help

[Bill Robbins]

Let’s see if we can squeeze it in between. Here’s what to do:

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

   
   // Adds Footer Navigation Menu
   	register_nav_menus( array(
   		'footer' => __( 'Footer', 'organizedthemes' ),
   	) );
   

4. Save your changes.
5. Next edit the footer.php file and find this spot:

   
   <div id="footer-right">
   

6. Right above that paste this:
   
7. Save your changes.
8. Lastly select style.css and scroll down to the very bottom and paste this:

   
   #footer #footer-menu li a,
   #footer #footer-menu li a:visited {
   	width: auto;
   	height: auto;
   	opacity: 1;
   	text-indent: 0;
   	background: none;
   }
   

   and save your changes.

See if that won’t add in a new menu location for your footer and then add it in for you.

If you have any trouble, let me know. If you need help with the styling, send over a link and I’ll see if I can offer some styles more specific to your site.

Bill

[Matthew Hallock]

Thank you for all of the code, this actually did work for adding a second menu location.

The problem is that all the items in the footer menu show up as facebook icons flush left with the left footer type. They link to the right pages and function properly, but they are facebook icons and they aren’t centered. Do you think there is a way we can center them and make them type instead?

Here is a link: http://glaciersociety.the-voice.com/

Let me know if we can fix it

[Bill Robbins]

Matthew,

Glad that got the menu hooked up for you. Would it be possible to get you to turn the menu on so I can see it in the footer. That way I can give you some quick styling to position it in the middle for you.

Thanks,
Bill

[Matthew Hallock]

Sorry about that. It’s on now

[Matthew Hallock]

On my other computer it’s coming up as type, but on mine its facebook icons. Is there any way to style the type and make it smaller?

[Bill Robbins]

Perfect. Thanks.

There’s probably only room for a few items (three or four) to fit between left and right hand side. I’d suggest moving the navigation menu above the other footer elements. Here’s how to do that:

Edit your footer.php file again. Cut out the section we pasted in earlier. This time paste it right below this:

<div id="footer-content">

and save your changes. Then edit the style.css file again and scroll down to the bottom and paste this:

#footer-menu {
	width: 100%;
	overflow: hidden;
	text-align: center;
	margin-bottom: 6px;
}

#footer #footer-menu li,
#footer #footer-menu li a,
#footer #footer-menu li a:visited {
	float: none;
	display: inline-block;
}

Save your changes and then refresh your page. See if that won’t work out a bit better for you.

Let me know if you need to adjust it any more,
Bill

[Matthew Hallock]

Okay so I kept it above

and I kept the initial CSS you gave me and I adjusted the type size and individual margins to make everything the right size. I just can’t figure out how to make the entire menu move to the right. I tried putting padding on the left but I can’t find where in the CSS to fix it. http://glaciersociety.the-voice.com

[Bill Robbins]

With them smaller, they’ll fit in. In order to have them drop-in between, the container that the menu is in will have to be “floated” one way or the other. Then the margin can be adjusted to fit. Give this a try:

#footer-menu {
	float: left;
	padding-top: 12px;
	margin-left: 50px;
	margin-bottom: 8px;
}

#footer-right {
	margin-top: 6px;
}

That should center the items a bit more both vertically and horizontally.

Let me know if it doesn’t quite work for you,
Bill

[Matthew Hallock]

That worked perfectly! Thank you so much for all of your help. It looks amazing.

[Bill Robbins]

Always glad to help out. If you need anything else, let me know.

Enjoy your weekend,
Bill

[Author]

Posts