X-Theme Mods: Transparent header/navbar only when on top of page

Mayank Gupta WordPress 0 Comments

There are lot of X theme users who want to keep header menu’s background as transparent. Unfortunately, X Theme fails to provide a ready solution to achieve this. Following these steps would ensure a transparent background for X theme’s top menu in the header.

  1. Go to Appearance -> Customize
  2. Go to Custom -> Edit Global CSS
  3. Paste the following code & save
    .x-logobar, .x-navbar, .x-navbar, .x-colophon.top {
    background-color: transparent;
    box-shadow: 0 0em 0em 0 transparent;
    }
    
    .x-navbar{
    border-bottom: 0px;
    }
    
    div#x-section-1 {
    margin-top: -91px!important; //this is normally the height of the x theme menu that you set in customizer
    }
    .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 {
    box-shadow: inset 0 0px 0 0 transparent;
    }
  4. Now, Edit Global Javascript
  5. Paste the following code & save
    jQuery(document).ready(function($){
    $('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
    $('.x-navbar-fixed-top, .x-navbar').css("z-index", "10000000");
    var rev_height = $(".x-slider-container").height();
    $(window).scroll(function(){
    if ($(this).scrollTop() > rev_height) {
    $('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: white !important'); //change white to whatever you prefer
    $('.x-navbar-fixed-top, .x-navbar').css("z-index", "10000000");
    } else {
    $('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent!important');
    $('.x-navbar-fixed-top, .x-navbar').css("z-index", "10000000");
    }
    });
    });

Leave a Reply

Your email address will not be published. Required fields are marked *