Search and Social media widget added to header

• 

  katelittle71 · Member · May 31, 2017 at 11:23 am

  • Copy link
  • Add topic to favorites

  Hi.
  I just wanted to find out how I can add a search widget and a social media widget to the header section as opposed to the footer or side bar please.

  Thanks

  Kate

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

• 

  thesacredpath · Member · Jun 1, 2017 at 1:41 am

  • Copy link

  Hi Kate, due to the way the header area resizes on smaller screens, and due to the way in which we have to move these, we can move the social icons from the footer area to above your header image with the following custom CSS. The following puts them in the upper left. The search widget, once you have added one, can be placed on the top right. We will have to limit this to screens 480px and wider since on screens narrower than that, the icons and search widget will start to overlap each other. Add this to your custom CSS, and then let me know when you have added a search widget to the footer widget area and I’ll work out that bit of code to add to the media query.

  @media screen and (min-width: 480px) {
  #page {
  	position: relative;
  }
  .social-links {
  	position: absolute;
  	top: 30px;
  	z-index: 1;
  }
  .site-branding {
  	padding-top: 80px;
  }
  }

• 

  katelittle71 · Member · Jun 5, 2017 at 1:58 pm

  • Copy link

  Hey, thank you so much! That is fantastic!

  I have added the search widget to my footer now.

  I am completely new to CSS and how to code so I am going to sound really naive….please bear with me!

  Where do I put the code that you have given me? ie how do I put it in once I enter the CSS section?

  This is what appears when I access the customising CSS section:

  /*
  Welcome to Custom CSS!

  To learn how this works, see http://wp.me/PEmnE-Bt
  */
  
  @media screen and (min-width: 768px)
  .front-page-content-area .with-featured-image {

  }

  Many thanks

  Kate

• 

  thesacredpath · Member · Jun 5, 2017 at 8:30 pm

  • Copy link

  Hi, at Customize > CSS, delete all that informational text and paste in the custom CSS.

  Use this instead of what I gave above though as it contains the code to move the search widget to the top right.

  @media screen and (min-width: 480px) {
  #page {
  	position: relative;
  }
  .social-links {
  	position: absolute;
  	top: 30px;
  	z-index: 1;
  }
  .site-branding {
  	padding-top: 80px;
  }
  #search-5 {
  	position: absolute;
  	top:30px;
  	right: 40px
  }
  #search-5 .widget-title {
  	display: none;
  }
  }

• 

  katelittle71 · Member · Jun 5, 2017 at 9:36 pm

  • Copy link

  Thank you so much.

  I will try it out….

  All the best

  Kate

• 

  thesacredpath · Member · Jun 5, 2017 at 11:09 pm

  • Copy link

  You are welcome, Kate, and let me know how it works out and if you have any problems or adjustments you wish to make.

• 

  katelittle71 · Member · Jun 6, 2017 at 10:33 am

  • Copy link

  It worked! Thank you!!!!

• 

  thesacredpath · Member · Jun 6, 2017 at 10:47 pm

  • Copy link

  Hooray and you are welcome!