Center Social Media Menu

timothyherzog · Member · Jan 27, 2017 at 11:25 pm
Copy link

Add topic to favorites
Can someone provide CSS to center the social media menu in the bottom of the footer on http://www.reachingahead.com, please?

Thank you!

The blog I need help with is: (visible only to logged in users)
eallas · Member · Jan 28, 2017 at 4:29 am
Copy link
According to the CSS for your theme, the code to align the social media menu would be the following:
```
.align-right {
    text-align: center !important;
}
```
kathrynwp · Staff · Jan 31, 2017 at 4:28 pm
Copy link
Hmm – Erick, that CSS doesn’t work for me. Also, two tips:

– !important should be avoided in CSS as much as possible, since it makes it difficult to override other elements later, and

– align-right is not a class specific to the social menu and modifying its CSS could affect other elements, so a more specific class should be targetted.

This is what works for me:
```
.footer-content .align-right {
  float: none;
}
.social-menu {
  text-align: center;
}
```
The first statement removes the right-float on the container, and the second centres the menu itself.

timothyherzog – let me know if this does the trick for you.
eallas · Member · Jan 31, 2017 at 4:38 pm
Copy link
Hi @kathrynwp!

Thanks for the tips!

For !important, are there situational moments where it should be used or should I do my best to stray away from it altogether?

Also, is .social-media one of the few classes that are universal or still theme-specific?

Thanks again Kathryn! I’ll work on my CSS more.
kathrynwp · Staff · Jan 31, 2017 at 5:43 pm
Copy link
Very rarely is !important needed, and it’s usually necessary only when a theme adds inline CSS. Here are some resources:

https://css-tricks.com/when-using-important-is-the-right-choice/
http://james.padolsey.com/css/dont-use-important/
https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

Also, is .social-media one of the few classes that are universal or still theme-specific?

It’s neither theme-specific or universal, but it’s specific to the social menu, whereas align-right may also be used elsewhere in the theme.
eallas · Member · Jan 31, 2017 at 6:38 pm
Copy link
Wow! Definitely shines a new light on the !important rule. I’ll definitely stray from it. The answer to the social-media helps as well. Thanks Kathryn!
kathrynwp · Staff · Jan 31, 2017 at 7:55 pm
Copy link
My pleasure! CSS is a fun adventure that kind of never ends. ;-) Enjoy your journey.

No items found.