Hi I have a fully working parish council website. Until I needed to add another page to the navigation. I cant reduce the ample space around the button lables to allow another page. I have experimented by reducing the link name to a few letters and the new page will then join the others. Website:http://www.westwoodparish.co.uk/about.php
Hi,
The nav links have a large horizontal padding (22px) you could try make smaller:
#nav li a {
display: block;
padding: 8px 22px;
text-decoration: none;
font-size: small;
font-weight: bold;
color: #3c793c;
border-right: 1px solid #ccc;
}
The page seems old style and I noticed you’re using positioning to place tha navbar, also there are better ways nowadays to build the nav that’s more flexible in link size and number.
But that’s another topic. 
1 Like
What @Erik_J said…it’s the 22px which is causing you the issue. You’ve got a fixed width site of 955px, and the 22px on each side will account for 396px right off the top, so that doesn’t leave a lot of room for the rest of the text.
1 Like
Hi Erik I have played around with the padding and it does not make any difference at all.
Hi Dave as I explained to Erik the padding makes no difference at all.
Sure it does. This fits within the space available.
padding: 8px 17px;
Though you’re going to have to change it accordingly the more elements you add, hence why Erik says there are better ways to approach it, but that’s a much bigger issue/change.
The ruleblock I posted has the padding you should try to reduce, try e.g. 16px.
Like @DaveMaxwell already suggested.
I also suggest that you should remove the exessive width for the body, by default the body takes the width of viewport so you really dont need the width set.
That would reduce the huge scroll to what is necessary in a narrow viewport.
Dave I have just altered the CSS to 8px 17px and nothing changes. I do recall that a while back when I added the About page I altered the padding to 22px that why i do not understand what is happening now. All I though i neede to do was alter the padding. I am using updated Firefox. Cleared the cache. i have just tried with MS Edge and the navbar is OK. Are you using Edge? or Firefox.
You can test changing the padding in the browser’s “Inspector” tool.
Right click on a nav link and choose “Inspect Element”.
yes I have been using the Inspector.
Then try e.g. padding: 8px 12px; or what you see fits.
Mind also the body witdth. 
You missed my reply to Dave. The website works fine using MS Edge but does not work with FireFox 80.01 64bit. I would like somone to confirm that there is a problem with FireFox. This isue has been drivig me mad!
Thanks
Geoff
I can’t test in Edge on a Linux machine.
The padding could need different values in different browser depending on their default font and e.g. list margins. It seems you’ve forgot to take control over browser defaults.
You could use the Egde Inspector and see what font family and size it use for the link. Then define them the same in the css so all browsers have the same.
I have been using the website since 2008 when I made it. Something wrong with Firefox as Edge renders it all OK. I have tried it with Safari - the Windows version and it renders fine.
…and five other browsers I’ve checked in. They all need a little less padding to not break the navbar. Or they could get the font and list defaults reset to work cross browser.
I guess Ms Edge is the new IE6 now.
Have you changed your default font-size in FF? Is your zoom set to 100% in all the browsers?
Either of those could throw off the size rendering (hence why fixed widths is rarely a good idea).
3 Likes
You also need to negate the default margins and padding on ul#nav as that is taking up some space (but nothing to do with your issue as such).
ul#nav{padding:0;margin:0;}
As others have said the site looks the same in various browsers (Firefox and Chrome (can’t check edge at the moment)) . I would check what dave said above if it looks that different to you in Firefox.
Post a screenshot of Edge and Firefox so we can see what you see
2 Likes
Just to add Dave that I cannot change the padding. I have edited another parish council website and managed to get the navbar elements to fit. See: http://www.southwickwilts.co.uk/ In both websites i have a combination of CSS files according to the page width. http://www.westwoodparish.co.uk/index.php I have two css files one for three column webpages and one for narrower pages single or double column layouts. The single column CSS file is ok. The wide css file does not accept padding changes - otherwise the issue would be solved. As I mentioned the only problem with both websites is just adding another nav button without it breaking into another line. Itshould be a simple problem.
Please tell what you can change so we can go from there.
Erik I can change everything but not padding. Lets repeat the facts if I change the padding the width of the nav menu will change. At present all I can do is change the label of each element eg. change “village News” to “vn” if i do that it confirms that the space available is limited as if I do that for two or three elements the menu is complete on one line… So how much space is there available for menu elements? I did do this and it was abvious that the space that is available is limited for no apparent reason.