Inserting List of Pages Horizontal in the Footer

[Sufia]

Hi, I want a footer like this – https://prnt.sc/ut0tg2
I’m trying to create it with widgets. But the problem is, the pages are being listed down vertically not horizontally. See here – https://prnt.sc/ut0x1f

Not sure what to do. Pls help.

[Elvin]

Hi,

Can you link us to the site in question? So we could provide a CSS code you can use to achieve that.

Thank you.:)

A wise man once said:
"Have you cleared your cache?"

[Sufia]

I’ve added link to my site in the private information section.

[Elvin]

But the problem is, the pages are being listed down vertically not horizontally. See here –https://prnt.sc/ut0x1f

I’ve checked the site and I didn’t see any vertical listed widget/s. Perhaps you’ve removed them.

Can you add them back? So I could see what CSS selector is used to for CSS coding.

Thanks. 🙂

A wise man once said:
"Have you cleared your cache?"

[Sufia]

Added.

Also, I want to change the color of the footer. It should replicate the color of the header.

[Elvin]

Thanks.

You can try adding this CSS code.

/* Display footer links in rows */
.footer-bar .widget_pages ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* For spacing between links*/
.footer-bar .widget_pages ul li{
    padding-left: 10px;
    padding-right: 10px;
}

Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

Also, I want to change the color of the footer. It should replicate the color of the header.

You can change the footer and its content’s colors through WP Admin Dashboard > Appearance > Customize > Colors > Footer.

A wise man once said:
"Have you cleared your cache?"

[Omar]

Hello Sufia,

I used the following code for the same purpose, inside the footer’s widget.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 5px;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

<div class="row">
  <div class="column">
<div class="row" style="text-align: right;">
<div style="color: #ffffff;"><a style="color: #ffffff;" href="Your Link Here">Title</a></div>
<div style="color: #ffffff;"><a style="color: #ffffff;" href="Your Link Here">Title</a></div>
<div style="color: #ffffff;"><a style="color: #ffffff;" href="Your Link Here">Title</a></div>
</div>
  </div>
  <div class="column">
<div style="color: #ffffff;"><a style="color: #ffffff;" href="Your Link Here">Title</a></div>
<div style="color: #ffffff;"><a style="color: #ffffff;" href="Your Link Here">Title</a></div>
<div style="color: #ffffff;"><a style="color: #ffffff;" href="Your Link Here">Title</a></div>
</div>

[Elvin]

@Omar thanks. that could work if we don’t want the links to dynamically change.

But using the navigation menu widget on footer bar and styling it may be better incase the user wants the footer links to dynamically change depending on what we set on Appearance > Menus.

A wise man once said:
"Have you cleared your cache?"

[Sufia]

Thanks Elvin. It worked.

[Sufia]

Opening this thread again.

On my phone, the links are too close to the border. I’ve shared a screenshot in the private information section.

How do I fix it?

[David]

Hi there,

can you provide a link to the site ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sufia]

Hi David, I shared the link to the site in the private information section.

[David]

Add the flex-wrap: wrap; property to this CSS:

/* Display footer links in rows */
.footer-bar .widget_pages ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sufia]

Thanks David, that worked.

I want to change the color of the footer. I want it to look like this – https://prnt.sc/v9na20

How can I achieve this?

[Elvin]

Hi,

For changing the color of the footer elements, you can try going to Dashboard > Appearance > Customize > Color > Footer and set the colors there.

If you find the customizer UI lacking, feel free to ask us for any necessary CSS codes.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts