Docs

[Robert E]

Hi,

I’ve seen this topic posted in other forum posts, but I have not been able to gather the exact information I need to implement a typical footer menu with stacked links. I’ve attached an image of what I’m trying to achieve. Per instructions in other posts, here’s what I’ve tried to do so far:

1) Turn on Footer Widget Areas in the Customizer.
2) Created a footer menu in Appearance > Menus.
3) In Appearance > Widgets I added a custom menu to Footer 1 and selected the footer menu I had created. But when this displays on the page, it looks pretty awful.

Can you please help guide me on how to style the footer menu like in the attached image using the above approach (which I think is the correct way I should be doing it)?

As a side note, I removed the menu I had created in the Footer 1 widget. I started trying to create this menu using a Text widget, but came to realize that this really is not the best way to do it. But you can see the styling elements that I used in Footer 1 to get relatively close.

If you need them, I’ve posted credentials in another forum post (post-1072424). My website is http://www.callboxstorage.com.

Thanks,

-Robert

[Nabeel A]

Hi Robert,

Thanks for writing in! I’m not able to find the footer menu on your site. Can you please add it so we can take a look? In the mean time you can use the following CSS to fix the styling of list you have in your footer,

footer.x-colophon.top a {
    color: #fffae3 !important;
}
.widget {
    text-shadow: none !important;
}

Thanks!

[Robert E]

Hi Nabeel,

Thanks for the quick response. I’ve added the footer menu into the Footer 2 widget area. Please take a look.

Thanks,

-Robert

[Christopher]

Hi there,

Please add this :

.widget {
    text-shadow: none;
}
.widget_nav_menu ul li a, .widget_meta ul li a, .widget_pages ul li a {
    box-shadow: none;
    border: none;
    background-color: transparent;
    padding: 2px;
    font-size: 15px;
    color: #fff;
}
.widget_nav_menu .current-menu-item>a,.widget_nav_menu ul li a:hover, .widget_meta ul li a:hover, .widget_pages ul li a:hover {
    background-color: transparent;
}
.widget ul, .widget ol {
    border: none;
    box-shadow: none;
}
footer h4.h-widget {
    color: #888e8e;
    text-transform: capitalize;
}

Hope it helps.

[Robert E]

Hi Christopher,

Thanks for the snippet! I added it in. Can you please tell me how I can remove the arrow that’s still to the left of each footer link?

Thanks,

-Robert

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

.widget_nav_menu ul li a:before, .widget_meta ul li a:before, .widget_pages ul li a:before {
    content: "" !important;
}

Cheers!

[Author]

Posts