Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] how to add space between menu items


  #1  
Old Oct 13, 2012, 02:54 PM
goodie
 
2 posts · Oct 2012
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!
  #2  
Old Oct 13, 2012, 03:39 PM
juggledad's Avatar
juggledad
 
23,549 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you try a search of the forum?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 14, 2012, 01:27 PM
goodie
 
2 posts · Oct 2012
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!
  #4  
Old Oct 14, 2012, 06:03 PM
juggledad's Avatar
juggledad
 
23,549 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Oct 16, 2012 at 08:54 AM.
  #5  
Old Apr 30, 2013, 07:53 PM
Sally
 
201 posts · Jul 2010
Kentucky
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!
  #6  
Old Apr 30, 2013, 08:38 PM
lmilesw's Avatar
lmilesw
 
10,173 posts · Jul 2009
Central New York State USA
Just add side margins to the list items of #rmenu2
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old May 12, 2013, 11:08 AM
Sally
 
201 posts · Jul 2010
Kentucky
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...
  #8  
Old May 12, 2013, 11:12 AM
Sally
 
201 posts · Jul 2010
Kentucky
Tried adding to the css inserts box, no change:

.rmenu2 {
margin-right: 5px;
}

also:

.rmenu2 {
margin: 5px;
}
  #9  
Old May 12, 2013, 11:16 AM
Sally
 
201 posts · Jul 2010
Kentucky
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.
  #10  
Old May 12, 2013, 11:29 AM
Sally
 
201 posts · Jul 2010
Kentucky
Ok, went here http://www.w3schools.com/css/css_margin.asp

Then added:

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

Nothing changed. Help!
  #11  
Old May 12, 2013, 02:40 PM
juggledad's Avatar
juggledad
 
23,549 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what you said, in english, is
Quote:
Put a 10px bottom marging and a 50px right margin on the DIV with the ID of 'menu1'.
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
  #12  
Old May 12, 2013, 06:45 PM
Sally
 
201 posts · Jul 2010
Kentucky
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.
  #13  
Old May 12, 2013, 07:35 PM
juggledad's Avatar
juggledad
 
23,549 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
go look at this thread and see if it will help. http://forum.bytesforall.com/showthread.php?t=7045
  #14  
Old May 12, 2013, 11:07 PM
Sally
 
201 posts · Jul 2010
Kentucky
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...
  #15  
Old May 13, 2013, 05:27 AM
juggledad's Avatar
juggledad
 
23,549 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Sorry, the looks like the color cheat sheet doesn't work wher the menu is centered...
try this in the CSS inserts
HTML Code:
div#menu1 ul.rMenu li {border-left: solid 20px red;}
div#menu1 ul.rMenu li:first-child {border-left: none;}
  #16  
Old May 13, 2013, 07:56 AM
Sally
 
201 posts · Jul 2010
Kentucky
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.
  #17  
Old May 13, 2013, 08:06 AM
Sally
 
201 posts · Jul 2010
Kentucky
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!

Last edited by Sally; May 13, 2013 at 08:14 AM.
  #18  
Old May 13, 2013, 08:13 AM
Sally
 
201 posts · Jul 2010
Kentucky
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!!!

Bookmarks

Tags
menu spacing, space between menu items

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Space between menu items edlElisabet Page & Category Menu Bars 4 Jun 19, 2012 11:52 AM
Page Menu Bar - space between items Tamas Page & Category Menu Bars 12 Apr 13, 2010 07:52 AM
[SOLVED] How Do You Add Extra Space Between Category or Page Menu Items? rhythm Page & Category Menu Bars 4 Mar 15, 2010 03:08 PM
Space between page menu items nymana Page & Category Menu Bars 7 Jul 28, 2009 08:42 AM
[SOLVED] Page Menu Bar - Strange Space Occurring Between Menu Items NealSchaffer Page & Category Menu Bars 2 Jun 20, 2009 11:18 AM


All times are GMT -6. The time now is 11:25 AM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.