Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you link to a screenshot of the issue you face below that resolution?
It is built to snap out of fixed position for tablets etc (1024px or below).
In style.css you will find:
@media only screen and (min-width: 1025px) {
/* fixed nav */
.topbar-enabled #header { padding-top: 50px; }
#nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
.admin-bar #nav-topbar.nav-container { top: 28px; }
}
Or in any version higher than v1.1.2:
@media only screen and (min-width: 1025px) {
/* fixed nav */
.full-width.topbar-enabled #header { padding-top: 50px; }
.full-width #nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
.full-width.admin-bar #nav-topbar.nav-container { top: 28px; }
}
Just modify that 1025px value either by editing or using custom css.
This will help you to apply css as per scroll event
<script>
jQuery(document).ready( function() {
var topOfOthDiv = jQuery("#nav-topbar").offset().top;
jQuery(window).scroll(function() {
if(jQuery(window).scrollTop() > topOfOthDiv) {
jQuery("#nav-topbar").css({
"position":"fixed",
"width":"50%"});
}else{
jQuery("#nav-topbar").css({
"position":"static",
"width":"100%"});
}
});
});
</script>
Alexander – nothing happens when I change it.
tsl143 – how to apply it?
@jack, did you empty all caches / force-refresh the page with F5?
Ok, it works now 🙂
Thank you for help and for your theme, it’s just awesome!
