Docs

[freipartner]

Hi there

I try to achieve something like in this template:
http://preview.themeforest.net/item/jardi-winery-vineyard-wine-shop-/full_screen_preview/16390279?_ga=1.52670760.1417541965.1481022992

I managed to get the transparent navbar and set the masthead height to 0px so that the image is beneath the transparent navbar.
Is it possible to get a slightly smaller solid navbar when scrolling down?

The page im currently working on can be found here: http://www.aagnech.myhostpoint.ch

Best, Christian

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

/*
// Transparent Menu Effect
*/

@media only screen and (min-width: 980px) {
body .x-navbar-wrap {
     height:auto;
}

body .x-navbar {
   
  background-color:transparent;
  padding-top: 20px;
  padding-bottom: 20px;
  transition:background-color 0.8s ease-out;
  border: 0;
  box-shadow: none;
}
  
}

body .x-navbar-solid {
	background-color: #333;
  padding-top: 0px;
  padding-bottom: 0px;
  transition: background-color 0.8s ease-in-out;
}

.masthead {
    position:absolute;
    z-index: 1000;
    top:0;
    left:0;
    right:0;
}
}

.x-navbar {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: all .5s ease-in-out;
    transform: all .5s ease-in-out;
    transition: all .5s ease-in-out;
} 

And this to Appereance > Customizer > Custom > CSS

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >20) {
              $('.x-navbar').addClass("x-navbar-solid");
          		
        }else {
              
          $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Hope it helps

Joao

[freipartner]

This reply has been marked as private.

[Joao]

Hi There,

I removed the padding and also added the following code for the logo to resize.

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height12 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 50px;
margin-top: 10px;
margin-bottom: 10px;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

.x-navbar {
border:none;
box-shadow:none;
}

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

Hope it helps

joao

[Author]

Posts