[Support request] Inserting List of Pages Horizontal in the Footer

Home Forums Support Inserting List of Pages Horizontal in the Footer

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #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/ut0x1f

    Not sure what to do. Pls help.

    #1472032
    Elvin
    Staff
    Customer Support

    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?"

    #1472045
    Sufia

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

    #1472047
    Elvin
    Staff
    Customer Support

    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?"

    #1472052
    Sufia

    Added.

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

    #1472062
    Elvin
    Staff
    Customer Support

    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?"

    #1472114
    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>
    
    
    #1472144
    Elvin
    Staff
    Customer 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?"

    #1472520
    Sufia

    Thanks Elvin. It worked.

    #1472625
    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?

    #1472693
    David
    Staff
    Customer Support

    Hi there,

    can you provide a link to the site ?

    #1474509
    Sufia

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

    #1474848
    David
    Staff
    Customer Support

    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;
    }
    #1510112
    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?

    #1510147
    Elvin
    Staff
    Customer Support

    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?"

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.