[Support request] Custom footer without premium

[David]

Try this CSS:

/* Remove widget titles - can do this in the Customizer */
.widget-title {
    display: none;
}

/* Remove Footer Grid alignment */
.site-footer .footer-widgets-container .inner-padding {
    padding-left: 0;
}

.site-footer .footer-widgets-container .inside-footer-widgets {
    margin-left: 0;
}

.footer-widget-1:before {
    display: none;
}

/* General Styles */
.site-footer .footer-widgets-container .inner-padding {
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-widget-1 {
    border-top: 1px solid #ccc;
    line-height: 1.8;
}

.footer-widget-1>* {
    font-size: 14px !important;
}

.footer-widget-1 .widget {
    width: 100%;
}

.site-footer aside:nth-child(2) {
    border-bottom: 1px solid #ccc;
}

/* Widget 1 Font size */
.site-footer aside:nth-child(1) div {
    font-size: 20px;
    line-height: 60px;
}

/* Widget menu inline */
.widget_nav_menu ul li {
    display: inline;
}

.widget_nav_menu ul li:not(:last-child) a:after {
    content: "|";
    margin-left: 5px;
}

/* Size and Align Logo */
.site-footer .widget_media_image {
    text-align: center;

}

.site-footer .widget_media_image img {
    height: 50px !important;
    width: auto;
    padding-bottom: 20px;
}

/* Postition last two widgets */
.site-footer aside:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

.site-footer aside:nth-child(5) {
    grid-column: 2;
    grid-row: 2 / 4;
    font-size: 14px;
    text-align: right;
    justify-self: end;
}

@media (min-width: 769px) {
    .site-footer aside:nth-child(1) {
        border-bottom: 1px solid #ccc;
    }

    .footer-widget-1 {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto 50px auto;
    }

    .site-footer .widget_media_image {
        text-align: right;
    }

    .site-footer .widget_media_image img {
        padding-bottom: 0;
    }

    .site-footer aside:nth-child(4),
    .site-footer aside:nth-child(5) {
        max-width: 320px;
    }
}

[Jeremy]

Well that worked beautifully! Thank you so much for helping me with that! I hope to learn from these examples.

David, thanks to you and everyone else for going above and beyond. GeneratePress support is the best.

Sincerely,

Jeremy

[David]

Awesome – first go as well 🙂
Have a read up on CSS Grid to get a bit of better understanding of how it works.

Glad to be of help.

[Jeremy]

Hi David,

Thanks for the lead on CSS Grids. I already started to look at those.

If I may… how might I vertically align the Licensed…? I made the logo bigger in the CSS you provided and noticed that the text in Widget 1 aligns to the top once that row becomes taller.

Thanks again.

[David]

Try this CSS – i would add it within the Media Query so it only applies to desktop:

.site-footer aside:nth-child(1) {
    display: flex;
    align-items: center;
}

[Jeremy]

As always, David, that did the trick.

Thanks again!

[David]

You’re welcome

[Jeremy]

Hi David,

Not sure if you want me to start a new Topic on this, but the footer menu I created for the custom footer you guys helped me build is stacking the menu items, rather than collapsing the sub menu items.

Any idea?

Thank you.

[David]

Is this for mobile ?

[Jeremy]

I would say both? I just noticed that the menu I created to place in the footer widget is not displaying the sub menu items as subs, but just stacking them. Specifically:

“community involvement”, “community sponsorships”, “the team”

[David]

Sorry was looking at the example site.

Wasn’t expecting submenus – not sure what to do with that as the standard behaviour of the nav widget.

[Jeremy]

No worries. Wanted to wait to see if a solution worked before responding. I experimented with creating an html menu which I created and tweaked here:

https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

It worked great, also with using some of your previous help to get it the way i wanted. Then I just placed an HTML widget in the footer widget and pasted the code.

Thanks again!

[David]

Awesome – glad to see you got it resolved.

[Author]

Posts