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 »

Even spacing of menu bar


  #1  
Old Apr 3, 2014, 04:50 AM
msg-meteorites
 
18 posts · Nov 2010
I am trying to get my menu bar justified to the left and the right but cant find a way to do so. It is justified to the left but it finsishes at a different place on the right dependant on which browser is used. I ideally want it evenly spaced and justified to the left and the right. Is this possible? My website is

www.msg-meteorites.co.uk

Cheers

Martin
  #2  
Old Apr 3, 2014, 04:57 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
to center it, look at the theme options
to evenly space it you will need to add some CSS padding to the elements
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Apr 4, 2014, 04:22 AM
msg-meteorites
 
18 posts · Nov 2010
Thank you. I can centre it via the ATO options but this still means it is not evenly spaced and for some reason it now has a dashed border around it which i can't remove?

The spacing looks very different when viewed in IE compared to Chrome. If the CSS is changed how will this affect how it is viewed in different browsers? Also forgive my ignorance but how do i add CSS padding to the elements?

Thanks again

Cheers

Martin
  #4  
Old Apr 4, 2014, 08:43 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Trying to get a menu to span the full width is problematic. As you have seen different browsers render things differently. I fiddled with padding on the menu items and could not get them to span the full width. At one point they almost got to full width but then when I add even slightly more padding the menu wrapped to two lines.

When I want to do this I generally use percentage widths for the menu items which makes them all 15% or maybe 13.4% or whatever works but in your case if you make all the menu items the same width they will need to be made wide enough for the longest menu title to fit and so your menu will wrap to a second line.

You can get rid of the dashed borders on a centered menu with CSS. You just need to use a tool like Firebug with Firefox to determine the selectors and then use CSS to get rid of the dashes.
__________________
~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.
  #5  
Old Apr 7, 2014, 04:07 AM
msg-meteorites
 
18 posts · Nov 2010
Thank you very much. I am a total beginner when it comes to website coding and have just about scraped through to create what i done so far by trial and error and lots of help and assistance! When you say use CSS to remove the dashed line when the menu is centred, what code? And where do you insert it? If the menu is spaced evenly as you suggest with each menu item being a certain percentage width adding up to 100% does it matter whether it is centred or left justified? The idea of having a percentage width makes sense so how do i go about doing this for my menu? Any help much appreciated :-)

Cheers

Martin
  #6  
Old Apr 7, 2014, 04:31 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
When you say use CSS to remove the dashed line when the menu is centred, what code? And where do you insert it?
Did you look thru the FAQ - ATAHUALPA section of the forum?

Quote:
If the menu is spaced evenly as you suggest with each menu item being a certain percentage width adding up to 100% does it matter whether it is centred or left justified?
Try it and see which you think looks better
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Apr 7, 2014, 11:48 AM
geezergeek
 
19 posts · Mar 2014
Don't know if this will help, but

In one case where I found I had extra space in my horizontal menubar, I used a bullet point and a single space before each page title, as follows: menu item

These filled up the horizontal space sufficiently that the menubar looked right. Depending on how much space you have, you could use bullet points, em dashes, or some other doodad for this purpose.

You can see the result here: http://www.nearbycafe.com/loveandlust/eroticbynature/
  #8  
Old Apr 7, 2014, 01:48 PM
msg-meteorites
 
18 posts · Nov 2010
Hi,

Yes i did, but i apologise as lots of it makes no sense to me :-( I was after a bit more info on how to make the menu bar items a certain percentage width to make them evenly spaced. I have not got a clue how to achieve this.

No worries and thanks for your assistance so far.

Cheers

Martin
  #9  
Old Apr 7, 2014, 03:23 PM
msg-meteorites
 
18 posts · Nov 2010
Thanks :-)

Think i have fixed it as best i can. Not sure how but it sort of works ;-) I added a percentage to each menu item in the CSS insert section and kept it to left justify and near as damnit it sorta works. If i change it to centred for some reason then it reverts to wrapping onto a second line. this looks fine for me on firefox, chrome and IE.

www.msg-meteorites.co.uk


Thanks all for your help :-)

Cheers

Martin

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Spacing menu items evenly across menu jfksdca Page & Category Menu Bars 1 Oct 5, 2012 11:08 AM
[SOLVED] Menu bar have no spacing Bertel Page & Category Menu Bars 0 Jul 9, 2010 02:51 AM
Menu Item Spacing georgenoise Page & Category Menu Bars 3 Mar 11, 2010 08:08 AM
Spacing Page Menu Bar Andygeog Page & Category Menu Bars 3 Jun 17, 2009 06:34 PM


All times are GMT -6. The time now is 03:57 PM.


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