Docs

[C I]

Hello, I have added code per this forum to my sticky header and while the logo does shrink, the rest of the header does not. There are a few issues with this:
1. It looks a little strange with the extra white space.
2. I’d actually want the logo to be a little bigger than what is showing now.
3. I don’t want the sticky header on mobile (loses background color)

Can you help please? Thank you!

[C I]

This reply has been marked as private.

[Rupok]

Hi there,

Can you share the code you are using for that? I can’t see any shrink or anything on your header.

Thanks!

[C I]

This reply has been marked as private.

[Joao]

Hi 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:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[C I]

This reply has been marked as private.

[Joao]

Hi There,

Please remove :

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

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
    min-height: 55px!important;
    height: 55px!important;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {

    height: 70px;
    padding-top: 35px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
margin-top: 5px;
}
.x-navbar .x-nav > li > a { 
    word-spacing: 0px;
}
body .x-navbar.x-navbar-fixed-top {
      background-color: rgba(255, 255, 255, 0.90)!important;
}
@media (max-width: 979px){
.x-nav-wrap.mobile {
    background-color: #fffff;
   padding:10px;
}
@media  (max-width:1200px) and (min-width:767px){

.x-face-graphic img {
    width: 70% !important;
}
@media (max-width: 979px) {
	.x-navbar .x-navbar-inner .x-nav-collapse .x-nav>.current-menu-item > a {
		color: #000 !important;
		background-color: transparent;
	}
}

And add this 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: 35px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: -20px;
height: 50px;
}

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

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

.x-navbar.x-navbar-fixed-top {
    background-color: rgba(255,255,255,0.7);
  }

And this to Appereance > Customizer > Custom > Javascript

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);
      }
    });
  }
});

[C I]

That worked, thank you!

[Rupok]

You are welcome!

Glad that it worked. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts