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()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("t3-mainnav").style.padding = "30px 10px";
document.getElementById("logo").style.fontSize = "25px";
} else {
document.getElementById("t3-mainnav").style.padding = "80px 10px";
document.getElementById("logo").style.fontSize = "35px";
}
}
</script>
Next I cleared custom menu styling and added this code:
/ Create a sticky/fixed navbar /
}
.t3-mainnav .navbar {
overflow: hidden;
background-color: #f1f1f1;
padding: 90px 10px; / Large padding which will shrink on scroll (using JS) /
transition: 0.4s; / Adds a transition effect when the padding is decreased /
position: fixed; / Sticky/fixed navbar /
width: 100%;
top: 0; / At the top /
z-index: 99;
}
/ 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.