[reelismParticipant]

Got that, and:

You need to add “.x-brand img” to the transition code also and only change the width of the image instead of the “.x-brand”.

?

[LelyModerator]

Correct about changing the image width but then the transition for .x-brand img was already added on this part. No need to add it again.

.x-navbar-inner, .x-navbar .x-brand img, .x-main
{
	transition: all 0.5s ease !important;
	-webkit-transition: all 0.5s ease !important;
}

[donologyParticipant]

Okay, very sorry for posting that code without checking it thoroughly. There is a major problem with using “.x-main” as it doesn’t show up on every page. Also, the X Theme removes the fixed nav on screens smaller than 980px. So we move over to using a CSS @media query to only apply our changes to a fixed nav and we will switch to using the masthead as our “jumping” content fixer.

As mentioned before, this code should be directly placed in the Custom area of the customizer:

CSS code should be added on Appearance > Customize > Custom > Edit Global CSS.
JS code should be added on Appearance > Customize > Custom > Edit Global Javascript.
Then on Appearance > Customize > Header > Navbar Position should be Fixed top.

CSS: Appearance > Customize > Custom > Edit Global CSS

@media ( min-width: 980px ) 
{
  .x-navbar-inner, .x-navbar .x-brand img, .masthead
  {
    transition: all 0.5s ease !important;
    -webkit-transition: all 0.5s ease !important;
  }

  .x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner,
  .x-navbar.x-navbar-fixed-top .x-navbar-inner, .masthead.fixed-nav
  {
    -webkit-transition: all 0.5s ease;
    transition: all 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 .desktop .x-nav > li ul
  {
    top: auto !important;
  }

  .x-navbar.x-navbar-fixed-top .x-brand
  {
    margin-top: 4px;
  }

  .x-navbar.x-navbar-fixed-top .x-brand img
  {
    width: 240px;
  }

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

  .masthead.fixed-nav
  {
    margin-bottom: -60px;
  }
}

JS: Appearance > Customize > Custom > Edit Global Javascript

jQuery( function( $ )
{
	$( window ).scroll( function()
	{ 
		if ( $( this ).scrollTop() <= 0 )
		{
			$( '.x-navbar' ).removeClass( 'x-navbar-fixed-top x-container-fluid max width' );
			$( '.masthead' ).removeClass( 'fixed-nav' );
		}
		else
		{
    			$( '.masthead' ).addClass( 'fixed-nav' );
		}
	});
});

[JoaoModerator]

Hi There,

Thanks for your input, the code of Lely should work just fine. But your also should be good.

Thanks,

Joao

[mulagalaParticipant]

Hi,

Sorry for intruding into the thread, but I wanted this shrinking header functionality but couldn’t get much help. I was trying to get the functionality of this site (reference): http://bergamotadesign.com/como-fazer-o-seu-e-book/

or this

http://themes.semicolonweb.com/html/canvas/index.php

I see many were asking for this, but is there a standard piece of code (css and js) that we can use to get this functionality and then do some adjustments for our site?

I tried to follow some code(copy, paste) in the above threads but its too difficult to follow changes along the thread. Kindly let me know if you are willing to help to achieve this which is greatly appreciated.

Many thanks.

[JoaoModerator]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

 .x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color:white;
}

Please add the following code to Appereance Customizer Custom JS

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

And

To Appereance Customizer Custom CSS

.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: 150px;
margin-top: 0;
}

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

And to Appereance Customizer | Custom | Jasvascript.

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

[mulagalaParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

I made a little tweak to make your links change from white to black.

It seems to work fine, altough your slider fails to load some times…for this we can try to improve your memory limit.

Hi There,

Would mind adding this in your wp-config.php located at the root directory of your site.

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

You can add it before the line

/* That’s all, stop editing! Happy blogging. */

Let us know what aspects of your navbar you are looking into improving.

Thanks

[mulagalaParticipant]

Hi Joao,

Im sorry to bug you again, unable to see the smooth transition like the examples.

http://bergamotadesign.com/como-fazer-o-seu-e-book/

I mean the lower edge transition is smooth in the examples, along with shrinking of the logo. I increased the transparency to see the edge.

Regarding the slider, I had a big image before, which I have now optimized and updated. Regarding changing the memory, its a wordpress managed hosting, so need to talk to the hosting guys.

Many Thanks
Suresh

[ChristopherModerator]

Hi there,

Please add this :

.x-navbar {
    transition: all 0.5s linear;
}
.x-navbar.x-navbar-fixed-top.x-navbar-solid .x-brand img {
    width: 30%;
    transition: all 0.5s linear;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[mulagalaParticipant]

Sure will, thanks for all the extraordinary help.

[ChristopherModerator]

You’re welcome.

[Author]

Posts