WordPress.com

1. eatingininstead
   Member
   Feb 16, 2013, 10:01 PM

   I have purchased CSS Customization and I need help with the following:

   http://eatingininstead.com/

   1. I would like the space between the line at the bottom of the header and the start of the posts to be smaller.

   2. I like the infinite scroll, but it makes the Follow, FB Like, and Twitter widgets hard to get to because they are at the bottom of my page. Is there anyway to get the small FB, Twitter and email icons (instead of the buttons) with Imbalance 2 so I can have the icons lined up horizontally under the search box or spaced out across the navigation menu? I'd prefer to have the search box, follow, FB, and twitter buttons spread across under the navigation menu. The widget stacks the buttons vertically and creates too much space in the header.
   [You can see right now I tried to move the follow icon under the search box, but it creates too much space in the header.]

   3. I'd like to increase the weight of the red line under the header, or eliminate it altogether. I definitely don't want the Follow button to appear underneath the line. (This is appearing differently on screen v. ipad).

   4. I would like to center the navigation menu. Right now, it appears slightly to the left and is not centered under the banner.

   5. Finally, I'd like to create a drop down menu under "Eating Out" to include "Eating out in 2012" and "Eating out in 2013." These pages are created and published, but I want the drop down to appear when you hover over "Eating Out."

   Thanks in advance!

   The blog I need help with is eatingininstead.com.

2. designsimply
   Staff
   Feb 21, 2013, 6:25 PM

   1. I would like the space between the line at the bottom of the header and the start of the posts to be smaller.

   The extra space is coming from the #header-right widget area which you've shifted by adding custom CSS that makes the #header-left area full width.

   Add this CSS and preview the change to see how it's currently taking up space:

   #header-right {
   	border: 1px solid red;
   }

   You've got two modules in there. You could try making the container full width and shifting those around using floats, or you could just keep the search box and set a reasonable height value for #header-right to prevent it from taking up so much space.

3. designsimply
   Staff
   Feb 21, 2013, 6:30 PM

   Is there anyway to get the small FB, Twitter and email icons (instead of the buttons) with Imbalance 2 so I can have the icons lined up horizontally under the search box or spaced out across the navigation menu?

   Try making #header-right full width and then floating the elements inside that container to the left. Here is an example to get you started:

   #header-right {
   	width: 100%;
   	height: 33px;
   }
   #header-right > div {
   	float: left;
   }

   Or try "float: right" to reverse the order. Note that you will probably also need to add left or right padding depending on what widgets you add there.

4. designsimply
   Staff
   Feb 21, 2013, 6:31 PM

   3. I'd like to increase the weight of the red line under the header, or eliminate it altogether.

   This will remove the border below the header:

   #header {
   	border: none;
   }

5. designsimply
   Staff
   Feb 21, 2013, 6:39 PM

   4. I would like to center the navigation menu. Right now, it appears slightly to the left and is not centered under the banner.

   Try something like this instead:

   #header-left {
   	text-align: center;
   	width: 1000px;
   	padding: 0;
   	margin-left: -20px;
   }
   #header-left > div {
   	display: inline-block;
   }
   .menu ul li:last-child {
   	padding-right: 0;
   }

   Be careful about what other similar CSS you have saved already. Note that it would be good to look through the stuff you already have related to the selectors used above and remove any related custom CSS you've saved in the past that might conflict with the new rules you're adding.

6. designsimply
   Staff
   Feb 21, 2013, 6:41 PM

   5. Finally, I'd like to create a drop down menu under "Eating Out" to include "Eating out in 2012" and "Eating out in 2013." These pages are created and published, but I want the drop down to appear when you hover over "Eating Out."

   You can add submenu items using custom menus. See this help page for details and examples:
   http://en.support.wordpress.com/menus/

Topic Closed

This topic has been closed to new replies.