Docs

[lily]

Hello staff!

I found this post to be very helpful regarding bottom footer formatting, but the code did not give me the desired results:
https://community.theme.co/forums/topic/bottom-footer-formatting-content-vertical-spacing-footer-height-social-icons/

I would like the bottom footer to look like this, but keep the font and the font size that I currently have:
http://www.stampd.com/pages/privacy-policy

And I also wanted to my social media icons to stay the same, but have them show up on the top nav bar. I originally removed them from the top bar, but I’m not sure how to put them back there.

I like how the top nav bar looks here with social icons, which are how I have my social icons as well:
http://epicmatcha.com/

Could you please help?

[lily]

This reply has been marked as private.

[Lely]

Hi Lily,

I can see that you have displayed menu and social icons on the topbar on the same line successfully. If you want both of them centered, please also add the following CSS:

.x-colophon.bottom .x-container {
    max-width: 739px;
    margin: 0 auto;
}

To display social media icons on Topbar again, please remove this custom CSS:

.x-topbar {
    height: 15px;
    min-height: 0; 
}
.x-topbar .x-social-global {
    display: none;
}

To remove the circle background on your topbar social icons, please add this custom CSS:

.x-topbar .x-social-global a {
    background: transparent;
}

Hope this helps.

[lily]

thank you very much! this helps a lot!

Could you help me align the facebook like button next to the social media in the top bar like this: http://epicmatcha.com/? And the text “have questions? contact us” should be in line with the facebook like button too.

[Rue Nel]

Hello There,

Thanks for the updates! To resolve this last issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-topbar .p-info {
    float: right;
    border-right: solid 2px #000;
    margin-right: 20px;
}

And you also need to add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(document).ready(function(){
    $('.x-topbar .p-info').insertAfter('.x-topbar .x-social-global');
  });
})(jQuery);

Like this: http://prntscr.com/cj9eyz

We would loved to know if this has work for you. Thank you.

[lily]

thank you so much Rue! It looks perfect!

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts