How to Split Footer Widget Custom Menu Into 2 Columns

Community Forums Forums Design Tips and Tricks How to Split Footer Widget Custom Menu Into 2 Columns

This topic is: resolved

This topic contains 14 replies, has 4 voices, and was last updated by  benborden 10 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #45459

    LocalSEODude
    Participant
    Post count: 32

    Using Agency Theme

    #45581

    AC
    Blocked
    Post count: 7712

    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.

    #45593

    LocalSEODude
    Participant
    Post count: 32

    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!

    #45736

    LocalSEODude
    Participant
    Post count: 32

    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

     

    #45959

    LocalSEODude
    Participant
    Post count: 32

    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

    #89356

    benborden
    Member
    Post count: 4

    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?

    #89370

    LocalSEODude
    Participant
    Post count: 32

    @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%”>

    </div>

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

    </div>

    #89372

    LocalSEODude
    Participant
    Post count: 32

    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.

    #89378

    benborden
    Member
    Post count: 4

    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

    #89382

    marybaum
    Participant
    Post count: 133

    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


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #89385

    marybaum
    Participant
    Post count: 133

    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


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #89393

    benborden
    Member
    Post count: 4

    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.

    #89394

    AC
    Blocked
    Post count: 7712

    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.

    • This reply was modified 10 months, 2 weeks ago by  AC. Reason: added code
    • This reply was modified 10 months, 2 weeks ago by  AC.
    • This reply was modified 10 months, 2 weeks ago by  AC. Reason: added code
    • This reply was modified 10 months, 2 weeks ago by  AC.
    #89396

    AC
    Blocked
    Post count: 7712

    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.

    • This reply was modified 10 months, 2 weeks ago by  AC.
    • This reply was modified 10 months, 2 weeks ago by  AC.
    • This reply was modified 10 months, 2 weeks ago by  AC.
    • This reply was modified 10 months, 2 weeks ago by  AC.
    #89406

    benborden
    Member
    Post count: 4

    @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.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.