Imbalance2 Header Customization

• 

  myriamponet · Member · Jul 11, 2013 at 3:40 pm

  • Copy link
  • Add topic to favorites

  Hi there WP folks!

  we spend the day customizing this site‘s header with the CSS upgrade and loads of helpfull info found in the forums.

  we were inspired by thepatternedplate.wordpress.com/ and the forum comments on that site were very helpfull! Thank you!

  Now we’re stuck on 2 things:
  1. the search box won’t dissappear (although we’ve moved the widget to the footer!)
  2. there’s a lot of white space above the header and below the horizontal menu (making the header a bit too high)

  Any help would be very appreciated!

  Here’s how our custom CSS looks like right now:

  .menu ul li {
  	float: left;
  	position: relative;
  	right: -23%;
  	text-align: left;
  	padding-right: 70px;
  }
  #header-left {
  	width: 1000px !important;
  	margin-top: 20px;
  	margin-bottom: 5px;
  }
  #header-right {
  	float: right;
  	width: 0 !important;
  	height: 0;
  }
  #header-centre {
  	width: 0 !important;
  	height: 0;
  }
  #branding {
  	background: url('http://myriamaredotcom.files.wordpress.com/2013/07/logo1.png') no-repeat;
  	width: 1000px;
  	height: 300px;
  }

  Have a wonderful day!

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

• 

  fabianapsimoes · Member · Jul 11, 2013 at 4:51 pm

  • Copy link

  For the whitespace, you can try:

  #branding {
  background: url("http://myriamaredotcom.files.wordpress.com/2013/07/logo1.png") no-repeat center;
  height: 250px;
  width: 1000px;
  }
  #header {
  padding-bottom: 0:
  }

  The first rule would replace your current rule for #branding. It might also help to crop the background image a bit on the top, I believe.

• 

  thesacredpath · Member · Jul 11, 2013 at 11:30 pm

  • Copy link

  1. This will get rid of that pesky search box at the right of your header area.

  #header-right .widget_search {
  display: none;
  }

  2. To remove some of the space above the header image, you can also take away the top padding for the wrapper with the following:

  #wrapper {
  padding-top: 0;
  }

  I looked at your header image, and you could also crop it tighter on the top as there is a lot of white space there and then upload the new image and use that one.

  See if the above, in addition to what @fabianapsimoes gave will work for you before creating a new image.

  I hope that helps.