Support » Fixing WordPress » after removing powered by wordpress, how do I move the social menu form right to

  • Resolved lileth

    (@lileth)


    Hi,

    I am new to WordPress. I’ve started with the footer in Twenty Sixteen. I have created a new file called twenysixteen-child and put in:

    style.css
    functions.php
    footer.php

    I have removed ‘Powered by WordPress’ and created three social media links/social menu in the dashboard which appear on the bottom right hand side.
    I want to center most things in footer including the social menu but cannot find anywhere any help with how to do this. I have tried using the DOM inspector but cannot find anything that shows up on there. I’ve spent hours reading but are still none the wiser. Please, please could some one help me.

    Any help will be gratefully received,

Viewing 6 replies - 16 through 21 (of 21 total)
  • Hi ThemeSumo, the address bit has worked and is now centered beneath the social menu but the social menu is now on the left hand side.

    It’s more than likely the float on the <li> element that you’re missing, here is the working CSS code in full that I am using on my live environment.

    .social-navigation li { 
        float: none; 
        display: inline-block; 
    }
    .site-footer .social-navigation {
        margin: 0 auto;
        order: 1;
        width: 100%;
        text-align: center;
    }
    .address-area {
        order: 2;
        margin: 30px auto 0;
        text-align: center;
    }

    You can safely discard all previous CSS code.

    Hope this helps.

    Thank you so much! That’s worked. If I want to add another line of address under the first one, centered, how would I do this? I’ve tried this but it hasn’t worked:

    .address-area2 {
    order: 3;
    margin: 40px auto 0;
    text-align: center;

    and

    <div class=”address-area2″><?php esc_html_e(‘Phone Number’, ‘twentysixteen’); ?></div>

    Many thanks

    In this case, you should use paragraphs within the .address-area div we’ve added, like so:

    <div class="address-area">
        <p><?php esc_html_e('123 High Street, Anytown, Country, ZIP Code', 'twentysixteen'); ?></p>
        <p><?php esc_html_e('Telephone Number', 'twentysixteen'); ?></p>
    </div>

    Then add this to your CSS:

    .address-area p {
    	margin-top: 10px;
    	margin-bottom: 0;
    }
    .address-area p:first-child {
    	margin-top: 0; 
    }

    You can freely add more paragraphs if needed now.

    Hope this helps.

    • This reply was modified 2 years, 11 months ago by  ThemeSumo. Reason: Code correction

    Thank you, thank you! Your blood’s worth bottling! I been reading up on this for weeks. I shall give you a rest now. My I come back to you in the future, I promise to try and solve problems myself first and post stuff on the forum. I’m now going to pour myself a nice drink and watch some TV. Hope the rest of your Saturday and weekend is peaceful.

    Thank you again!

    You’re very welcome.

    A good tip for you is to use your browsers Inspect Element tool (right-click an area of your website and click Inspect Element).

    This will open a new window that contains your code structure, you can select any part of this structure to view the CSS code being applied to the selected element, it’s also useful for finding classes for specific areas that you can use in your CSS to make customizations.

    You can modify this structure (and the CSS) directly within this window with the changes taking effect in real-time, this allows you to test things without it affecting your live site.

    Feel free to post new threads in the future, I’ll be sure to help out if I think I can.

    Enjoy your evening.

Viewing 6 replies - 16 through 21 (of 21 total)
  • The topic ‘after removing powered by wordpress, how do I move the social menu form right to’ is closed to new replies.