Move Widgets Menu in Illustratr Theme

• 

  caitiewhelan · Member · Apr 22, 2015 at 7:49 pm

  • Copy link
  • Add topic to favorites

  Hellos!

  I’ve got the Illustratr theme and would love to move the widgets menu (FB/Twitter) from the bottom of the page to the top. I followed these instructions (→https://en.forums.wordpress.com/topic/move-widgets-bar-from-bottom-to-right-side?replies=3) and disabled the widget trigger, but couldn’t get the widgets to the top of the page. I know it might be tricky, but I’m up for the challenge (I think!).

  The site I’m referencing is thelightningnotes.com. I’d be terrifically grateful for any help! Thanks much.

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

• 

  thesacredpath · Member · Apr 22, 2015 at 9:44 pm

  • Copy link

  Hi there, on responsive designed themes (that work on all screen/window sizes) this can be challenging since we have to use position: absolute; to do it, and that means that the FB/Twitter icons end up floating independently of the rest of the page elements. From the looks of things, we would have to create a number of media queries to adjust positions of the icons and also the site title. Add the following and you can get the gist of things. You will see that if you view things on a phone or on a smaller tablet, the icons are to the left of center.

  @media screen and (min-width: 960px) {
  	.menu-social {
  		position: absolute;
  		top: 50px;
  		width: 100%;
  		right: 48%;
  	}
  	#page {
  		position: relative;
  		max-width: 100%;
  	}
  	#menu-social li {
  		display: inline;
  		float: none;
  	}
  }
  @media screen and (max-width: 959px) {
  	.menu-social {
  		position: absolute;
  		top: 40px;
  		display:block;
  		text-align: center;
  		max-width: 74%;
  	}
  	#menu-social {
  		float: none;
  	}
  	#page {
  		position: relative;
  	}
  }
  @media screen and (max-width: 768px) {
  	.site-title {
  		margin-top: 60px;
  	}
  }

• 

  caitiewhelan · Member · Apr 22, 2015 at 10:16 pm

  • Copy link

  thesacredpath!

  You are pure genius. I just did this and it worked like a charm. However, the icons are bumping into the site title and I can’t quite figure out what I need to change to move them up a bit. Is that possible?

  (And apologies if you explained that before and it was over my CSS newbie head!)

  Thank you!

• 

  caitiewhelan · Member · Apr 22, 2015 at 10:34 pm

  • Copy link

  And my apologies for the double dip, thesacredpath, but is it possible to have the widgets open in a separate window? Currently, they open in my website’s and I’d love it to be a new window.

  With a mountain of gratitude!

• 

  caitiewhelan · Member · Apr 23, 2015 at 11:28 pm

  • Copy link

  Howdy! Just wanted to follow-up on this. I’d be absolutely tickled if I could even just get the widgets to the left or right.

  Thanks, again!

• 

  caitiewhelan · Member · Apr 24, 2015 at 12:01 am

  • Copy link

  Never mind! Figured it out. Thanks, again, thesacredpath.

• 

  thesacredpath · Member · Apr 28, 2015 at 5:28 pm

  • Copy link

  You are welcome.