Help with moving widgets using CSS in Forever Theme.

• 

  alexanderthetraveler · Member · Mar 12, 2014 at 11:09 pm

  • Copy link
  • Add topic to favorites

  Hi, I want to move the first widget of the right sidebar (the social media icons) and the first widget of the third footer area (the Search bar) to the top right of the Header of my site.

  I would like the end result to look something like this:http://journeyofwonders.files.wordpress.com/2014/03/example.jpg

  Also, is it possible for areas of the header to be made non-clickable? I don’t want my readers to click outside of the search bar and be transported back to the home page.

  Any help, please? Thanks :D

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

• 

  hfzrhmn · Member · Mar 12, 2014 at 11:22 pm

  • Copy link

  Hello,

  The following CSS will help for the social icons and search bar positioning:

  /* Anchoring for the absolutely position elements */
  #page {
  	position: relative;
  }
  /* Positioning for social icons */
  #secondary #aboutme_widget-3 {
  	position: absolute;
  	top: 50px;
  	padding-left: 0 !important;
  }
  
  /* Positioning for search box */
  #supplementary #search-3 {
  	position: absolute;
  	top: 120px;
  	right: 0;
  	width: 250px;
  	overflow: auto;
  }
  #supplementary #search-3 input {
  	width: 200px;
  }
  
  #supplementary #search-3 .widget-title {
  	font-size: 18px;
  	width: 205px;
  }

  I’ll see what I can do with the non-clickable header thing.

• 

  alexanderthetraveler · Member · Mar 12, 2014 at 11:36 pm

  • Copy link

  Thank you very much hfzrhmn, it worked like magic! :D

• 

  hfzrhmn · Member · Mar 12, 2014 at 11:38 pm

  • Copy link

  You’re welcome!