Return to previous page

How to create footer menu that looks just like the header menu?

This topic has 15 replies, 3 voices, and was last updated 8 years, 1 months ago ago by Jack Richardson

wangj

Participant

February 29, 2016 at 05:26

Adding menus to the footer via the widgets look horrible. They are bunched up, of lined vertically, or the wrong color on black background, etc.

I simply want the black background footer, with a horizontal menu that is the same style as the one in the header, with a white or light grey font. Simple, clean.

Actually, the WooClean template (free template) does this perfectly. How can I do this? Thank you!

#115240 Copied

14 Answers

Stan Russell

Participant

February 29, 2016 at 08:04

Hello wangj,

please provide us with link to your site and admin credentials for it in private content.

Regards,
Stan Russell.

#115244 Copied

wangj

Participant

March 1, 2016 at 02:53

Hi Stan,

Thank you for the reply. I do not understand what you mean by “for it in private content.”
Why can’t you just tell me what to do? I prefer to learn how to do it, rather than have you do it for me, so I can do it again if need be.

I just want to know how to create a footer menu that looks like the header menu

Thanks.

#115542 Copied

Jack Richardson

Support staff

March 1, 2016 at 19:32

Hello,

You need to create custom footer as described in the theme documentation https://8theme.com/demo/docs/woopress/#!/0_footer
To add menu in your static block you can use Visual Composer element “WP Custom Menu” and style it to your needs.

Best regards,
Jack Richardson.

#115714 Copied

wangj

Participant

March 2, 2016 at 06:13

Thanks Jack. But is there a easier way?

Is there a way to import the full width footer widgets from wooclean into woopress?

#115740 Copied

wangj

Participant

March 2, 2016 at 06:28

Jack, your reply to this other similar thread looks like it would work for me as well. only issue is there is no xml folder/files in the wooclean theme….

https://www.8theme.com/topic/creating-a-nice-footer-menu/

Basically I need a full width footer widget. It does not exist on woopress theme.

Here is screen caps of the widget, and the final result from using it. This is what I need.

#115741 Copied

Jack Richardson

Support staff

March 2, 2016 at 12:09

Hello,

Are you using Wooclean theme or Woopress?
Do you need Wooclean footer or as shown on Woopress demo?
Please clarify with more details and provide us with WP Dashboard credentials in private content.

Best regards,
Jack Richardson.

#115813 Copied

wangj

Participant

March 2, 2016 at 12:20

I am using woopress theme. I do not like the footer style, it is too complicated.

I want to use the simple footer style from wooclean.

The images I attached in my last post, those are the footer from wooclean.

How can I make it like this in woopress?

#115822 Copied

Jack Richardson

Support staff

March 2, 2016 at 12:28

Hello,

Please provide us with WP Dashboard credentials in private content.

Best regards,
Jack Richardson.

#115826 Copied

wangj

Participant

March 2, 2016 at 12:40

ok, I have a footer menu called “footer menu” already created. I want it at the bottom, like the image I posted above. Thanks.

Please, contact administrator
for this information.

#115829 Copied
Jack Richardson

Support staff

March 2, 2016 at 16:50
Hello,

I’ve created footer in static block, added “8theme-static block” widget in Appearance > Widgets > Footer 1 and selected the created static block.
Also I’ve added the css code in Theme Options > Custom CSS > Custom CSS for Desktop:
```
.custom-footer-menu .widget_nav_menu li {
    border-bottom: none;
    width: auto;
    padding: 20px;
}

.footer-top .about-company img {
    width: 70%;
}
```
Now you can edit footer style to your needs.

Best regards,
Jack Richardson.
#115857 Copied
wangj

Participant

March 3, 2016 at 05:08

Thanks, but when I try to select the black background in the theme options for the footer it does not work. Any idea to make it black, with white text, like the image I posted earlier?

Also, how can I adjust the spacing above and below the footer? There was too much spacing.

Thank you.

#115913 Copied
Jack Richardson

Support staff

March 3, 2016 at 11:10
Hello,

I’ve added the following css code in Theme Options > Custom CSS > Custom CSS for Desktop:
```
.footer-top.footer-top-3 {
    background-color: #000000;
}

.footer-top.footer-top-3 a {
    color: #ffffff;
}

.footer-top.footer-top-3 a:hover {
    color: #b6b6b6 !important;
}

.custom-footer-menu {
    margin-bottom: 0px !important;
}
```
Please clear browser cache and check the site.

Best regards,
Jack Richardson.
#115947 Copied
wangj

Participant

March 3, 2016 at 15:10

Looks great now! Thank you.

However, there are a few issues with it. On some pages, there is a big white space under the footer. These pages:

/shop/
/about-us/
/cart/
/returns/
/shipping/

Also, one more issue, when you click the footer link and go to that page, then you look at the footer link, it is highlighted with a white box. Prefer it did not highlight any color.

Thank you.

#115983 Copied
Jack Richardson

Support staff

March 3, 2016 at 20:45
Hello,

On some pages, there is a big white space under the footer.

You need to add content to the mentioned pages.

As for the second issue I’ve added this css code in Theme Options > Custom CSS > Global Custom CSS section:
```
.footer-top.footer-top-3 .menu >li.current-menu-item >a {
    background-color: #000000;
}
```
Please check footer menu now.

Best regards,
Jack Richardson.
#116046 Copied
Viewing 15 results - 1 through 15 (of 15 total)