Second menu bar at bottom of website

[steve rawlings]

Hi Bill,
I would like to have a second menu bar at the bottom of site above the footer. What would be the best way to do that?

Thanks for your help,

Steve

[Bill Robbins]

Good Morning Steve,

You’ll need to a bit of editing in order to add in another navigation menu. Here’s what you’ll need to do:

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 bottom and paste this:

   
   (Be sure to copy that code from the support site and not the notification email.)

   and save your changes.

4. Next edit the footer.php file and find this spot:

   
   <footer class="primary clearfix">
   

5. Right below that add this:

   
   <?php wp_nav_menu( array( 
   	'theme_location'	=> 'secondary',
   	'container'		=> 'nav',
   	'container_class'	=> 'footer-menu',
   	'container_id'		=> 'footer-menu',
   	'fallback_cb'		=> false
   	) ); ?>
   

   and save your changes.

6. Next go to the Theme Options page and click on the Styling tab. Scroll down to the Custom CSS box and add this:

   
   #footer-menu ul {
   	list-style-type: none;
   	margin-bottom: 20px;
   	overflow: hidden;
   }
   
   #footer-menu ul li {
   	float: left;
   	margin-right: 10px;
   }
   

   and update your settings.

That should give you a new menu location that will appear above the footer. Let me know if you run into trouble.

Have a great weekend,
Bill

[steve rawlings]

Hi Bill,

I put the first code on the bottom of the functions php. page and updated and lost access to my sight. Is there an easy fix for this?

Thank you,

Steve

[Bill Robbins]

Good Morning Steve,

Copying and pasting into the functions.php file is very tricky. If a comma is off or you end up with a curly quote instead of a straight one, it’ll give you the “white screen of death.”

To undo that, go to your web host’s control panel and find the file browser. Go to the wp-content/themes/epic folder and edit the functions.php file there. Remove the code you added and save your changes.

That should let you back in so that you can give it another shot. Let me know if you run into trouble.

Bill

[steve rawlings]

Thanks Bill,

Site is recovered.

I am not able to get the second menu to appear above the footer yet. I must have something else blocking your code.

Any ideas?

Steve

[Bill Robbins]

Hello Steve,

I’m glad to hear that you were able to get your site back up again. Have you created a navigation menu and assigned it to the new menu location in the theme? Let me know if that’s not the hang up.

Thanks,
Bill

[steve rawlings]

Hi Bill,

The menu bar is coming along great. I just have a couple of adjustments I couldn’t figure out.

1. The text on the footer menu is not turning orange when I hover over them.

2. On the “donate now” button the dark blue hover color is smaller than the orange button.

I would like to duplicate the top menu without the secondary menus.

Have a great day,

Steve

[Bill Robbins]

Good Morning Steve,

See if adding this CSS to the Custom CSS box in your theme options won’t take care of both of those issues for you.

ul#footer-menu a,
ul#footer-menu a:visited {
	color: #fff;
}

ul#footer-menu li a:hover,
ul#footer-menu li.current-menu-item a {
	color: #cda137;
}

ul#menu-footer-menu li#menu-item-1035  {
	padding: 0;
}

ul#menu-footer-menu li#menu-item-1035 a {
	display: inline-block;
	padding: 7px 10px;
}

Let me know if you run into any trouble there.

Enjoy your day,
Bill

[steve rawlings]

Hi Bill,

The text is still not changing color in footer menu. Maybe I have some code interfering with the code you gave me.

Sorry to bother you again about this menu.

Thank you for such great support!

Steve

Here is what I have in my Custom CSS box.

h1.title,
article h1,
h1.page-title,
.page-content h1 {
display: none;
}

body div.wrap {
top: -9px;
}

header.primary li#menu-item-565 {
float: right;
border-left: 1px solid #f6f5f2;
border-right: 2px solid #f6f5f2;
}

li#menu-item-565 a {
background-color: #cda137;

}

li#menu-item-565 a:hover {
background-color: #07166b;
}

header.primary .menu li a,
header.primary .menu li a:visited {
border-left: 1px solid #f6f5f2;
font-size: 17px;
}

li#menu-item-37 a {
background-color: #1e73be;
border-left: 2px solid #f6f5f2;
}

li#menu-item-37 a:hover {
background-color: #1e73be;
}

body.light header.primary .menu li ul {
background-color: #07166b;
margin-top: 15px;
width: 180px;
}

nav#top-menu {
width: 100%;
}

h2.widget-title,
h3.widget-title {
text-align: center;
width: 240px;
}

body.light .wrap {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#footer-menu ul {
list-style-type: none;
margin-bottom: 10px;
margin-top: -39px;
margin-right: 0px;
margin-left: 0px;
overflow: hidden;
background-color: #1e73be;
font-size: 17px;
border-bottom: 2px solid #f6f5f2;
}

#footer-menu ul li {
float: left;
padding: 7px 12px;
margin-right: 0px;
margin-left: 0px;
border-right: 1px solid #f6f5f2;
}

footer.primary li#menu-item-1040 {
border-right: none;
}

footer.primary li#menu-item-1035 {
float: right;
border-left: 1px solid #f6f5f2;
border-right: 2px solid #f6f5f2;
}

li#menu-item-1035 {
background-color: #cda137;
}

li#menu-item-1035 :hover {
background-color: #07166b;
}

li#menu-item-1042 {
border-left: 2px solid #f6f5f2;
}

ul#footer-menu li a:hover,
ul#footer-menu li.current-menu-item a {
color: #cda137;
}

ul#menu-footer-menu li#menu-item-1035 {
padding: 0;
}

ul#menu-footer-menu li#menu-item-1035 a {
display: inline-block;
padding: 7px 10px;
}

[Bill Robbins]

Hey Steve,

You can always add an important declaration like this:

ul#footer-menu li a:hover,
ul#footer-menu li.current-menu-item a {
     color: #cda137 !important;
}

Bill

[Author]

Posts