relocation of elements.

• 

  thecoolesttripever · Member · May 26, 2017 at 5:32 am

  • Copy link
  • Add topic to favorites

  Hi,

  1) I have a problem with relocating “header-text’ and “header-search” with CSS. I would like to move both elements to center and align them not side to side, but up and down. I want locate “header-search” on upper center and put “header-text’ below “header-search”

  so, I got a technical help, and adjust it with the code below;

  #header-content #header-search,
  #header-content #header-text {
  float: none;
  display: block;
  clear: both;
  width: 60%;
  max-width: 100%;
  text-align: center;
  margin: 20px auto 0;

  }

  #header-content #header-social-icons {
  float: right;
  clear: none;
  text-align: right;
  }

  #header-content #header-social-icons li {
  float: right;
  }

  However, with this code, the header became too thick as the top-margin of “header-search” becomes bigger.
  if possible, I want to let the logo and header-search side to side.

  2) I would like to move social icons menu to the footer from header. The social icons menu also seems to make the header thicker. so I would like to move the menu to the footer if possible.

  I will appreciate it if you can hand me some help.

  Thanks.

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

• 

  thecoolesttripever · Member · May 26, 2017 at 5:52 am

  • Copy link

  The first question has solved. But I still have a problem with moving the social icons menu…

• 

  thesacredpath · Member · May 26, 2017 at 8:15 pm

  • Copy link

  Hi there,

  2) I would like to move social icons menu to the footer from header. The social icons menu also seems to make the header thicker. so I would like to move the menu to the footer if possible.

  What I would suggest would be to use the Social Icons Widget either in the footer widget area, or possibly put it in the sidebar widget area. We can move the social media menu to the bottom though with the following custom CSS. There may need to be some adjustments since I don’t see the social icon menu on your site right now and worked this out off of the theme demo site.

  #header-social-icons {
  	position: absolute;
  	bottom: 1em;
  	z-index: 100
  }
  #footer {
  	padding: 1.8em 1.5em
  }