Reduce size of nav buttons in horizontal menu

No Dave did check this. Are you sure that a new instance of a browser will start with the Zoom factor from the lhe lastsetting anyhow?

Then we can suggest some work around.

But, how come the padding is changed on the live page???

Copied from the current live site:

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-size: small;
    font-weight: bold;
    color: #3c793c;
    border-right: 1px solid #ccc;
}
1 Like

I fell a sleep and when I woke up all the menu on the nav’s were too small. I’ll leae it to tomorrow and see if I can adjust them. Could this be som sort of server issue?

I’m going to go back to what I said in post #3 of this thread. You are limited in what you can put within a fixed size container.

Your menu is 955px wide. You have nine lines in your menu. That means all the text + the padding around them has to fall under 955px, or it will wrap.

So if you set it to 15px on each side, that means you’re taking off 270px right off the top ((15px left + 15px right) * 9 menu items) so you’re now dealing with 680px. Take out another 9px for the border rights, and you’re down to 671px. That’s how much space you have for actual text, including spaces and punctuation. Anything over that are you’re going to wrap.

So if you add another element, you lose another 31px, which means you’re now dealing with 659px of space for text, including spaces and punctuation.

3 Likes

Some browsers remember the zoom setting for each page you visit. If you return to the same page that you had previously zoomed (or accidentally zoomed) then the browser remembers this and shows it at that size.

1 Like

Clearly you can, after all. :wink:

Earlier, @PaulOB suggested you should reset the browser defaults on the list. The list has a style attribut in the html where the reset could be added:

<ul id="nav" style="list-style-type:none; margin: 0; padding: 0;">

Or you could remove the style attribute and add a new rule-block in the css file (westwoosingle.css):

#nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

After resetting the list in the Inspector, I changed the link padding back to 22px to see what happens.


#nav li a {
    display: block;
    padding: 8px 22px;
    text-decoration: none;
    font-size: small;
    font-weight: bold;
    color: #3c793c;
    border-right: 1px solid #ccc;
}

And *** me, the nav fits on the row. I guess Edge have a different default for lists that allowed the nav to work. :upside_down_face:

1 Like

My last message was written after I had fallen asleep a few whiskeys prior, and found that the nav fitted but needed padding. The trouble with the website is that it has an old Cutenews CMS that stored articles in memory. After 12 years it tends to run out of memory, newer versions use an index to point to articles. sometimes I lose a page column and have to offload content to PDFs. Sometimes the wholesite goes down. The Southwick website has a more recent Cutenews version and does not have the lack of memory issue. The reason why i was having an issue with that site was because the list of links was too long. I changed “Southwick Playing Field” to “Playing field” to make the list fit. I have deleted several articles on the Westwood site and for the time being the site is up and running.

Thanks for the support
Geoff

1 Like

Did you try resetting the list defaults of top and bottom margins amd left padding?

Have you added a reset rule for the list as we suggested?

Reset the defaults on elements in use is the standard way to make them cross browser compatible.

Glad you solved the issue. :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.