[SOLVED] how to add space between menu items
 

Hi,
I just started using the Atahualpa Theme v 3.7.9. and I'm just getting familiar with it and coding. This may seem like a simple question but how do you increase the spacing between the menu items? I would like to increase the spacing between the words Home, About, Contact, etc...

I looked under
Atahualpa Theme Options
- Header Area
- Menu 1 (Page Menu)

And I don't see a setting to increase the spacing. I looked all over and can't seem to find it(unless I'm over looking something)

Can anyone inform me on how to do this? I would assume it's a simple thing, since almost everything else on this theme is pretty much easy to configure.

thanks in advance!

did you try a search of the forum?

yeah..I searched the forum and didn't find a response to what I was looking for. Some posts were talking about inserting code...but I have no idea
1. what the code means
2. where you would insert it

Isn't there a way to increase the spacing using the options under "Atahualpa Theme Options" somewhere?

Thanks!

You need to add some CSS to add padding or margins to the sides of the menu elements. You can do it by adding CSS inthe CSS inserts option

Can you tell me the css code to add that will put space between the page menu items? They are very crowded. You can see it here:

HomesForSaleWinchesterKy.com

Thank you!

Just add side margins to the list items of #rmenu2

Where do I go to do that, please? I went here in the Editor:
bfa_new_wp3_menus.php

Tried margin: 5 auto, then margin 15 auto, the just margin 15 and no difference. I must be in the wrong place...

------------
if ( $theme_location == "menu2" )
$before_menu = '<div id="bfa_cat_menu"><table cellpadding="0" cellspacing="0" style="margin: 0 auto"><tr><td align="center">';
$after_menu = '</td></tr></table></div>';
}
------------
Then tried adding this to the stylesheet and nothing.

.rmenu2 {
margin-right: 5px;
}

------------
Need more hints...

Tried adding to the css inserts box, no change:

.rmenu2 {
margin-right: 5px;
}

also:

.rmenu2 {
margin: 5px;
}

This worked to add margin to the bottom of the menu:

div#menu1 {
margin-bottom: 10px;
}

What is the word to add margin to the right of a menu item? This will probably move the whole thing off-center, but at least I'd like to give it a shot.

Thank you.

Ok, went here http://www.w3schools.com/css/css_margin.asp

Then added:

div#menu1 {
margin-bottom: 10px;
margin-right:50px;
}

Nothing changed. Help!

what you said, in english, is and if you look at that div in firebug and toggle the margins, you will see the DIV shift.

Now you didn't tell it to do anything about the elements within that DIV

Only because I don't know what I'm doing :) Don't know what a div is or firebug... I try to figure out what you and lmiles are saying, search and find code, then copy and paste hoping for the best. That's how I found this:

div#menu1 {
margin-bottom: 10px;
}

I put it in the css inserts box and it worked perfectly to add 10px to the bottom margin of the menu. So I figured it would work for the margin. But "margin-right: 50px" doesn't add 50px of margin to the right of either the menu items or the entire menu. It doesn't do anything.

I need more clues as to what I'm looking for... going to search for "elements within a div."

P.S. I just put a 50 in there so that the change would be so big, I'd know for sure it worked. Probably somewhere between 5px and 10px will be the right amount.

go look at this thread and see if it will help. http://forum.bytesforall.com/showthread.php?t=7045

Thank you -- I read thru that. I pasted the page menu item css into the CSS Inserts box, messed with it to try to get a result. Here's what it is now:

/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: red;
border: 10px;
margin-right: 25px;
}

No change at all to the menu. Not even a red background...

Sorry, the looks like the color cheat sheet doesn't work wher the menu is centered...
try this in the CSS inserts

Thank you, that did it. Haha, you slipped the red in there and I didn't even see it. Imagine my surprise!

So I just need to figure out the "ul.rMenu" -- that must identify the elements in the div? I'm taking the coding classes at htmldog that was recommended somewhere else.

Ok, I can't change the color to white (or to any other color so far). When I deleted the word "red", it changed to black. Now it won't even go back to red.

How do I make the border white? I have my background set to white, border set to white, everything set to white except hover to gray and link text to black. Thank you!

If you could reach me, you would slap me. As I was looking for why the background was black between the menu items, I saw that in my border criteria, I left out the word "solid" (or "dashed") so it read: "5px #ffffff" instead of "solid 5px #ffffff". When I added the word solid, the menu spaced to 5px apart right away.

That was in addition to the 10px in the code you gave me, so I deleted that and now it's spaced as it should be.

Thank you!!!