Docs

[Steve Taylor]

Hi guys!

I added some code that I found throughout the forum and was able to make my header AND top bar be “fixed” The problem is that there’s a weird “flashing” that happens when you scroll down. http://www.itworkshosting.com/oitvoip

CSS:

/* FIXED TOPBAR*/

@media (min-width:979px){
.x-topbar.x-navbar-fixed-top {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 2000;
}
.x-navbar-fixed-top {
    left: 0;
    right: 0;
  	top: 56px;
    position: fixed;
}
}

Java:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-topbar').addClass("x-navbar-fixed-top");
		} else {
			$('.x-topbar').removeClass("x-navbar-fixed-top");
		}
	});
});

Is there something I may have missed?

[Rupok]

Hi there,

In that case, remove all CSS and JavaScript and just use the below CSS :

@media only screen and (min-width: 980px) {
.x-topbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
.x-navbar {
  left: 0;
  position: fixed;
  right: 0;
  top: 59px;
}
}

Hope this helps.

[Author]

Posts