Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2832953
We need help for footer three column navigation for single widget.
Closed

Comments

  • freshde started the conversation
    July 23, 2021 at 5:14pm

    Hello Support,
    Good day, I'm using Soledad theme and I'm trying to use three column navigation for footer widget #1, but there is no luck. The navigation showed only a single column in the widget area. I just need the widget almost similar like the image I'm attaching below.
    Please have a look and give me a quick and easy solution.
    Thanks in advance.

  •  2,614
    PenciDesign replied
    July 23, 2021 at 5:21pm

    Hi,

    Please send me your site live URL. I'll visit and send you a solution.

    Regards,
    PenciDesign.


  •  2,614
    PenciDesign replied
    July 23, 2021 at 5:54pm

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    @media only screen and (min-width: 768px) {
        #widget-area .widget nav ul,
        #widget-area .widget ul.menu {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    #widget-area .widget nav ul li,
        #widget-area .widget ul.menu li {
            flex: 0 0 auto;
            width: 33.3333333333%;
            margin-bottom: 10px;
        }
    }

    Regards,
    PenciDesign.


  • freshde replied
    July 23, 2021 at 6:18pm

    Hi,
    Thanks for your prompt reply :) It works great!
    But I have some other issues in the footer-
    #1. how to remove the navigation seperator line?
    #2 how to change the widget title background color same as the page's post title background color?
    #3 how to change the widget's post date color? The post's date isn't visible clearly, I need those white.
    Hope you'll give the solution real quick.
    Thanks again.

  •  2,614
    PenciDesign replied
    July 23, 2021 at 6:30pm

    Hi,

    1. Please add the custom CSS code:

    #widget-area .widget nav ul li,
    #widget-area .widget ul.menu li {
        border: 0;
    }
#widget-area .widget nav ul li a:hover,
    #widget-area .widget ul.menu li a:hover {
        color: #fff;
    }
    2. Please go to Appearance → Customize → Footer → Colors, change your colour at the Footer Widgets Area section.

    3. Please add the custom CSS to change the footer time colour:

    #widget-area .feat-meta span > time,
    #widget-area span.side-item-meta > time,
    #widget-area span.date > time {
        color: #fff; /* change your color code here */
    }

    Regards,
    PenciDesign.


  • freshde replied
    July 23, 2021 at 7:03pm

    Hi Support,
    Thanks for the help!
    Some more changes regarding the footer-
    #1. Footer widget navigation hover color should be black as like the widget post's hover color and without the hover text underline.
    #2. The footer widget title background color should be the below screenshot's.
    Please help!
    Thanks in advance!

  •  2,614
    PenciDesign replied
    July 23, 2021 at 7:09pm

    Hi,

    1. Remove the following custom CSS on the previous reply:

    #widget-area .widget nav ul li a:hover,
#widget-area .widget ul.menu li a:hover {
    color: #fff;
}

    2. Add the custom CSS:

    .footer-widget-wrapper .widget .widget-title .inner-arrow {
        display: inline-block;
        border: 0;
        background-color: #585858;
        padding: 10px 15px;
    }

    Regards,
    PenciDesign.


  • freshde replied
    July 23, 2021 at 7:16pm

    Great thanks, but the footer widget navigation underline is still showing, we don't want to see those navigation underline when hover.
    Hope you'll help to hide those underline.
    Thanks.

  •  2,614
    PenciDesign replied
    July 23, 2021 at 7:24pm

    Hi,

    Please add the CSS code to disable underline when hovering:

    #widget-area .widget nav ul li a:hover,
    #widget-area .widget ul.menu li a:hover {
        text-decoration: none;
    }

    Regards,
    PenciDesign.


  • freshde replied
    July 23, 2021 at 7:30pm

    Thanks!
    You're supporting real quick!
    I appreciate your effort!
    Thanks indeed!