[Resolved] How to add 4 Columns in footer bar?

[Ajay Nehra]

I want to add 4 columns in footer bar … not in Footer Widgets or footer, i want to add in footer bar like this -> https://ibb.co/84rXdg4
Please check image for example

[David]

Hi there,

simplest method would be to use a Block Element with GenerateBlocks Grid Block to create your own.

In the Block Element select the Footer Hook.

[Ajay Nehra]

Is there any other way without any extra plugins, only with code?

[David]

What do you intend to add to the 4 columns ?

TO NOTE: The GenerateBlocks plugin only adds the necessary HTML and CSS it requires, nothing else, so its the same as me providing custom HTML and CSS.

[Ajay Nehra]

I don’t want to install a plugin just for one change.

What do you intend to add to the 4 columns ?
please check this image-> https://ibb.co/kyWJn3k

[David]

Add each of them as widgets to the footer bar and then let me know so i can take a look at the required CSS.

[Ajay Nehra]

Done…Please check now

[David]

Try adding this CSS:

@media(min-width: 600px) {
    footer.site-info .copyright-bar {
        margin-right: 40px;
    }

    .footer-bar {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .footer-bar p {
        margin-bottom: 0;
    }
}

You can re-order your widgets positioning to display the menu first, BUT you can’t have the copyright in column 2.

[Ajay Nehra]

Thanks David

[David]

You’re welcome

[Author]

Posts