Moving social media widgets to top of page Motif theme

• 

  downrivershape · Member · May 24, 2014 at 2:16 am

  • Copy link
  • Add topic to favorites

  moving social media icons

  Can anyone help me with the CSS needed to move my social media icons to the top of my page next to my site title?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 26, 2014 at 9:08 pm

  • Copy link

  Hi, Motif is a responsive with theme which adjusts for all browser/screen sizes all the way down to phones. In the other thread you posted, you were wanting to fix your logo image visibility. See how that works and then we can work on this issue. That change will have an effect on the CSS used to move the social icons up into the header area.

• 

  designsimply · Member · Jun 19, 2014 at 3:08 pm

  • Copy link

  I checked http://downriverfit.com/ and I see that you have added a couple social media icons in a widget in the sidebar. I viewed the page source and found that widget has an ID of “text-7” so we can use that to target just that widget and move it to another area on the page.

  #page {
  	position: relative;
  }
  
  #text-7 {
  	background-color: inherit;
  	box-shadow: none;
  	padding: 0;
  	position: absolute;
  	right: 0px;
  	top: 50px;
  }

  You can adjust the right and top values to move the icons to where you think they look good.

  If you’d like to learn more about how absolute positioning works in CSS,t this is a great tutorial: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

• 

  designsimply · Member · Jun 25, 2014 at 9:53 pm

  • Copy link

  @downrivershape, I noticed you haven’t moved your social media icons into the header on http://downriverfit.com/ yet. Still need help with it?