I note that in your own business website, you use this, although not making it available to us. So I thought I would try it for myself instead of bailing as a longtime Joomlart customer. I would rather remain a customer. There are plenty of competitors who offer templates with this menu option pre-installed. It's much better than the "sticky" CSS option because it works across all browsers.
So I tried it and it didn't quite work. First I inserted this script in the template custom script after head.
<script>
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {scrollFunction()};

/ Style the navbar links /
}
.t3-mainnav .navbar a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}

/ Style the logo /
}
.t3-mainnav .navbar #logo {
font-size: 35px;
font-weight: bold;
transition: 0.4s;
}

/ Links on mouse-over /
}
.t3-mainnav .navbar a:hover {
background-color: #ddd;
color: black;
}

/ Style the active/current link /
}
.t3-mainnav .navbar a.active {
background-color: dodgerblue;
color: white;
}

/ Display some links to the right /
}
.t3-mainnav .navbar-right {
float: right;
}

/ Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally /
@media screen and (max-width: 580px) {
}
.t3-mainnav .navbar {
padding: 20px 10px !important; / Use !important to make sure that JavaScript doesn't override the padding on small screens /
}
}
.t3-mainnav .navbar a {
float: none;
display: block;
text-align: left;
}
}
.t3-mainnav .navbar-right {
float: none;
}
}
As far as I can see, it should work but doesn't. Has anybody else out there done this successfully? I know it can work because it's in use at joomlart.com.
Thanks to anybody who can point out where I went wrong!
-Jim G.