Footer menu in lower footer

Hi,

My client asked me to add a menu to the footer. Now I noticed that the footer is not set as a menu location in the theme settings. I know it’s possible to have a custom menu in the footer using a widget, but my client prefers to have the menu in the lower footer left or right of the copyright text.

Is this possible?

Thx so much.

Cheers.

Johan

Hello,

Thank you for contacting us.

Try to add menus to your footer copyright areas in Appearance -> Widgets via Custom Menu widget. If it will not have a nice style just write us and we will prepare some code snippet to fix it 🙂

Regards

Hi,

Thx for your prompt reply.
When adding the menu in the footer area using the custom menu widget the menu is outlined vertical. We prefer it to be outlined horizontal so it will be in line with the social icons in the footer.

How do we establish a horizontal menu including submenu items in the footer?

Your help is more than welcome.

Thx!

Johan

Hi,

Please add the menu vertically and we will provide you with a code snippet to transform it to the horizontal orientation. And it would be very helpful if you could prepare some screenshot of how it should look.

Regards

Hi,
Thx for your prompt reply. I have added the menu in the footer using the custom menu widget.
Please find enclosed the screenshot of how we would like it to be horizontal transformed.

Thx for the support.

Cheers.

Johan

Try to add this code snippet to the Custom CSS section in Theme Settings

.menu-footer-menu-container > ul {
  text-align: center;
}

.menu-footer-menu-container > ul > li {
  position: relative;
  display: inline-block; 
  text-align: left;
}

.menu-footer-menu-container > ul > li a {
  display: inline-block;
  text-transform: uppercase;
  padding: 5px;
}

.menu-footer-menu-container > ul > li:hover ul.sub-menu {
  visibility: visible;
  opacity:1;
  bottom: 100%;
}

.menu-footer-menu-container ul.sub-menu {
  position: absolute;
  bottom: 80%;
  left: 0;
  visibility: hidden;
  opacity: 0;
  width: 230px;
  background: white;
  padding: 10px;
  margin: 0;
  
  box-shadow: 0 0 2px rgba(0,0,0,.1);
  
  -webkit-transition: all .25s ease .1s;
  -moz-transition: all .25s ease .1s;
  -o-transition: all .25s ease .1s;
  transition: all .25s ease .1s;
}

.menu-footer-menu-container ul.sub-menu li {
  margin-bottom: 0;
}

Regards

Thx!!!!!
That works like a charm.

Cheers.

Johan

You are welcome, we are always happy to help you, write us when you have any difficulties or issues with our theme.

And we would be glad if you will rate our theme with 5 stars on Theme Forest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

Thank you in advance 🙂

[Author]

Posts