Docs

[robert2891]

Hi guys, my home page has link hover colour(RED), but its not coming on the other pages. Here’s the custom CSS provided by you and javascript:
CSS

.x-navbar {
    border: none;
    box-shadow: none;
  background-color: transparent;
}
.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow:   none;
    -webkit-box-shadow: none;
    box-shadow:         none;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: #272727;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: red;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}
@media ( min-width: 980px ) {
.home .masthead {
height:0px;
}
}
body:not(.home) .x-navbar .desktop .x-nav>li>a {
    color: #000 !important;
}
body:not(.home) .x-navbar {
    background: #fff !important;
}
.x-btn-navbar, .x-btn-navbar.collapsed:hover, .x-btn-navbar:hover {
    color: #000;
}
@media (max-width: 979px){
 .home .x-navbar-fixed-top {
    top:0;
    position: fixed;
  }

 .home .x-btn-navbar, 
 .home .x-btn-navbar.collapsed:hover, 
 .home .x-btn-navbar:hover {
    color: red;
    margin-top: 40px;
  }
}
/* position the overlay on top of the slider */
 .home .masthead {
height: 0px !important;
}

/* fix the menu icon dropping under the logo */
 .home .x-brand {
width: 85%;
max-width: 250px;
}
 .home .x-brand img {
width: 100%;
}

@media ( max-width: 979px ) { /* do it for mobile only */

body:not(.home) .x-navbar { /* let's apply the styling for non homepage navbar */

/* apply fixed positioning with semi-transparent white background */

    background: rgba(255, 255, 255, 1.0) !important;
    position: fixed;
    top: auto;
    right: 0;
  	left: 0;

}

body:not(.home) .masthead {

/* since we applied fixed positioning, let's avoid clipping as we don't have sliders for non home page */

min-height: 98px;

}

body:not(.home) .x-btn-navbar, body:not(.home) .x-btn-navbar.collapsed:hover, body:not(.home) .x-btn-navbar:hover {

/* let's display red mobile menu */

    color: red;
    margin-top: 40px;

}

}
@media (max-width:330px){
.x-brand img {
    width: 228px;
}
}

JavaScript

jQuery(".home .x-brand img").attr("src","MY-WHITE-LOGO-URL");

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 150) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 50) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $('.home .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

jQuery(function($) {
 $(window).scroll(function() {
   if($('.home .x-navbar').hasClass('x-navbar-scrolled')) {
     $('.home .x-navbar-fixed-top .x-brand img').attr('src','MY-BLACK-LOGO-URL');
   }else{
     $('.home .x-navbar .x-brand img').attr('src','MY-WHITE-LOGO-URL');
   }
 });
});

[Christopher]

Hi there,

Please update this code :

body:not(.home) .x-navbar .desktop .x-nav>li>a {
    color: #000 !important;
}

to :

body:not(.home) .x-navbar .desktop .x-nav>li>a {
    color: #000;
}

Add this code too :

body:not(.home) .x-navbar .desktop .x-nav>li>a:hover, body:not(.home) .x-navbar .desktop .x-nav>li.current>a {
    color: red;
}

Hope it helps.

[Author]

Posts