Docs

[treyheath]

I am working on the current site: http://verobc.com/

Through my research on this forum, I frequent use the following code in order to generate a transparent menu header on top of my Slider Revolution slide.

.masthead {
    height: 0;
}

.x-navbar.nb-trans {
    background-color: transparent;
    position: relative;
    border: none;
    box-shadow: none;
}

.x-navbar.nb-trans .x-brand {
    color: #fff;
}

.x-navbar.nb-trans .x-nav li a {
    color: #ffffff;
}

.x-navbar.nb-trans .x-nav li.current-menu-item > a,
.x-navbar.nb-trans .x-nav li a:hover {
    color: #fffff;
}

And

jQuery(function($){
  var $win = $(window);
  function navbarChangeColor() {
    var $slider   = $('.x-slider-container.below'),
    $sliderHeight = $slider.outerHeight();
    $navbar       = $('.x-navbar');

    if( $win.scrollTop() > $sliderHeight ) {
      $navbar.removeClass('nb-trans').addClass('nb-solid');
    } else {
      $navbar.removeClass('nb-solid').addClass('nb-trans');
    }
  }
  navbarChangeColor();
  $win.scroll(navbarChangeColor);
});

My issue is my content area on internal pages is pushing into the header. See: http://verobc.wpengine.com/how-research-can-help-the-future-of-truck-parking/

Any idea how I can fix this?

[Rahul]

Hey There,
Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– WordPress Admin username / password
Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.
Thanks.

[treyheath]

This reply has been marked as private.

[Thai]

Hi There,

Please update your custom CSS to this:

.home .masthead {
    height: 0;
}

.home .x-navbar.nb-trans {
    background-color: transparent;
    position: relative;
    border: none;
    box-shadow: none;
}

.home .x-navbar.nb-trans .x-brand {
    color: #fff;
}

.home .x-navbar.nb-trans .x-nav li a {
    color: #ffffff;
}

.home .x-navbar.nb-trans .x-nav li.current-menu-item > a,
.home .x-navbar.nb-trans .x-nav li a:hover {
    color: #fffff;
}

Hope it helps 🙂

[Author]

Posts