Originally Posted by
mentorman
Thanks Acorn, really must learn how to look under the bonnet one day. Some of the time lag seems to be with positioning of the nav bar which is stickied to the left hand margin to be viewed all the time whilst scrolling. It seems to have trouble finding its position whilst the site is adjusting to the screen width. Don't know what causes that. any ideas Ken
It is mostly down to you juggling 24 images and 24 text lines in your main NavBar, which I assume is a Soft-group collection of buttons, as you have no sub-menus.
To speed things up, I would have created a simpler, pure CSS button array:
Placeholder Code Body:
Code:
<a href="#" class="myButtonBank">Bookings & Contacts</a>
Website Code Head:
Code:
.myButtonBank {
box-shadow: 0px 1px 0px 0px #fff6af;
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
background-color:#ffec64;
border-radius:12px;
border:2px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:Arial;
font-size:18px;
font-weight:bold;
padding:10px 35px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}
.myButtonBank:hover {
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
background-color:#ffab23;
}
.myButtonBank:active {
position:relative;
top:1px; }
This will be slicker and less jumpy.
Your site, however, has some serious activity going on:
I assume this is the falling snow.
There are cleaner CSS snowfalls out there that would not drag your site performance down. I do like this CSS/JS one though; https://codepen.io/tksiiii/pen/MRjWzv; some are quite soothing: https://codepen.io/redstapler/pen/MZXJZx.
Acorn
Bookmarks