help CCSS for Customized Imbalance 2

• 

  iheartrio · Member · Dec 31, 2012 at 5:14 pm

  • Copy link
  • Add topic to favorites

  Hi

  I’m trying to figure out how to align my menu with my search box. every time I try I end up moving my menu bar down which in turn caused the search box to also move down leaving them unbalanced but with more space above.

  I’ve found the following topic helpful
  https://en.forums.wordpress.com/topic/align-menu-tabs-side-by-side-in-imbalance?replies=22

  and this is where I found out how to do the CSS to get the menu bar horizontal but I’m now stuck.

  Any help would be much appreciate.

  oh, my site is:
  http://iheartrio.wordpress.com/

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

• 

  designsimply · Member · Jan 2, 2013 at 3:56 pm

  • Copy link

  One thing I find useful for debugging sometimes is to add borders to all of the elements I see listed for a section in the page source. For the main menu and widget areas in the header, you can do that by previewing CSS like this:

  #header-left { border: 1px solid red; }
  #header-center { border: 1px solid green; }
  #header-right { border: 1px solid blue; }

  Looking around at that and at the CSS using my browser’s web inspector, I found there is some padding on the right side of “#header-left” that you don’t need with the layout you’ve customized. You can remove it with this:

  #header-left {
  	padding-right: 0;
  }

  Use the Appearance → Widgets page to rearrange the widgets inside the “#header-right” area.

  You might also want to get rid of the extra space below the main “#header” block, so try adding this:

  #header {
  	padding-bottom: 0;
  }