How to Split Footer Widget Custom Menu Into 2 Columns

[LocalSEODude]

Using Agency Theme

[AnitaC]

You can do this in your Footer Widget settings of the CSS. You will see footer-widget-1, footer-widget-2, footer-widget-3. Delete "footer-widget-2" - and then change the width of footer-widget-1 and footer-widget 3 to be of equal proportion.

---

Need help with customization or troubleshooting? Reach out to me.

[LocalSEODude]

Thanks for the reply anitac!

Sorry - I was unclear.

All 3 Footer Widgets are still needed.

footer-widget-3 currently displays 10 pages from a menu created in Dashboard --> Appearance --> Menu

I need Footer Widget 3 (Far Right Footer Widget) to be divided into 2 columns so that there are 5 pages from the Menu in each.

Again - Sorry! - this information should have been provided in the original post (I thought I'd included a screenshot, but apparently it's not showing)

Thanks!

[LocalSEODude]

Anyone know if this needs to be done in PHP Function or code added to footer-widget-3 can override?

Example of how the Far Right Widget currently looks (left) vs how it will look afterwards with the 2 columns (right):

 

Home                                                                          Home                    More Services

About Us                                                                    About Us              More Services

Services                                                                      Services                More Services

More Services                                                           More Services      Blog

More Services                                                           More Services      Contact

More Services

More Services

More Services

Blog

Contact

 

[LocalSEODude]

Figured it out!!!!!!

Hope this helps others out as I've seen quite a few people looking for a solution, but no answer as easy and direct as this - http://www.ehow.com/info_12203176_can-create-two-columns-wordpress-widget.html

[benborden]

Hi I am trying to do the same thing but still am not following this. (newbie) With the options are you still having to do it by hand within a text widget or can the css option do it automatically with existing and future links?

[LocalSEODude]

@benborden This should help. Just copy and paste the div code below into your text widget, adjust widths as needed, replace domain.com with the URL and replace Page Name with the name of your page. Hope this helps!! - Scott

<div style="float: left; width: 55%">

• Page Name
• Page Name
• Page Name

</div>

<div style="float: left; width: 45%">

• Page Name
• Page Name
• Page Name

</div>

[LocalSEODude]

OK - so forgot that this would not display the code as it is written, but the site I mentioned previously http://www.ehow.com/info_12203176_can-create-two-columns-wordpress-widget.html shows you what to add between the div tags.

[benborden]

thats ok I understand what your saying but I was using the genesis custom menu widget and trying to figure out how to divide my Cities or Regions Sub Menu into 2 columns of 5 in Footer 3. Is that not possible?
<div class="footer-widgets-3 widget-area">
<ul id="menu-regions-sub-menu" class="menu">

What your saying is use a text widget with that code and do it all by hand?

It was frustrating i can use firebug to make the changes and with the code your suggesting but of course it cant save. Guess there is no way to access the html code directly huh?

I appreciate your reply! BB

[marybaum]

There is, if you're willing to find the php file it's buried in, make your changes and save a copy somewhere else on your hard drive, so that when you update your theme or WP Core, you can replace the file instead of having to find and recode it again.

I do that with WooCommerce, because I don't like their dialogue copy (insert 20-minute riff here). It's a pain, but worth it imho.

I'm just guessing the code you're looking for is in footer.php - or you could possibly add your html to the footer-customization code that goes in functions.php.

Now I'm curious and off to take a look . . .

Hope this helps a little!

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

Or you could probably also set up two mini-widget areas, or a single, 2-column area - make it a class and call it 2colmenu, perhaps - inside the footer widget ...

Registering the area(s) in functions.php, then create a template file. Name it 2colfootermenu.php maybe - and write your markup in there.

That would be much easier - then, in the Widgets panel, dump your menu items where you want them.

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[benborden]

I have looked through all the files i see and see nothing i can edit. used to looking at html

so there is not way to do it by css? So i guess there is no reason to have the submenu that i imported from a prior site? Should i just delete the submenu and then just use a regular text widget and do it by hand using the
<div style="float: left; width: 45%">Content Here</div> <div style="float: left; width: 45%">Content Here</div>

I just dont want to delete this and find out later there was another way.

[AnitaC]

Try this:

#nav_menu-4 li {
    background: url("images/icon-li-footer.png") no-repeat scroll 0 7px / 8px 8px rgba(0, 0, 0, 0);
    float: left;
    list-style-type: none;
    margin-bottom: 0.6rem;
    padding: 0 0 0.6rem 1.6rem;
    width: 48%;
}

Add the Float and Width lines this code. Save and then let me know if it works.

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

I edited my code, so check again at what I posted. Add it to your style sheet. I edited again, so it should be correct now.

---

Need help with customization or troubleshooting? Reach out to me.

[benborden]

@anitac thank you that did work. I messed w CSS about all day. CB/GEN support told me it could be done. Glad you popped up! talk to you nw.

[Author]

Posts