- This topic has 16 replies, 4 voices, and was last updated 1 year, 7 months ago by
David.
-
AuthorPosts
-
October 4, 2020 at 11:41 am #1472021
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/ut0x1fNot sure what to do. Pls help.
October 4, 2020 at 12:09 pm #1472032Elvin
StaffCustomer SupportHi,
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?"October 4, 2020 at 12:24 pm #1472045Sufia
I’ve added link to my site in the private information section.
October 4, 2020 at 12:28 pm #1472047Elvin
StaffCustomer SupportBut 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?"October 4, 2020 at 12:35 pm #1472052Sufia
Added.
Also, I want to change the color of the footer. It should replicate the color of the header.
October 4, 2020 at 12:53 pm #1472062Elvin
StaffCustomer SupportThanks.
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?"October 4, 2020 at 2:16 pm #1472114Omar
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>
October 4, 2020 at 2:49 pm #1472144Elvin
StaffCustomer Support@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?"October 5, 2020 at 12:54 am #1472520Sufia
Thanks Elvin. It worked.
October 5, 2020 at 2:02 am #1472625Sufia
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?
October 5, 2020 at 2:52 am #1472693David
StaffCustomer SupportHi there,
can you provide a link to the site ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 6, 2020 at 6:06 am #1474509Sufia
Hi David, I shared the link to the site in the private information section.
October 6, 2020 at 8:28 am #1474848David
StaffCustomer SupportAdd 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/October 29, 2020 at 1:10 pm #1510112Sufia
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?
October 29, 2020 at 1:50 pm #1510147Elvin
StaffCustomer SupportHi,
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?" -
AuthorPosts
- You must be logged in to reply to this topic.