Docs

[VeritasMarketing]

in the header of my site, its set to keep the main menue sticky with a colored background on scroll. is there a way to keep the topbar sticky with this? also add some padding under my logo so it dosnt hit the edge of the color on scroll?

Thanks

[VeritasMarketing]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To add some space under your logo, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  .x-navbar.x-navbar-fixed-top .x-brand.img {
    margin: 30px auto 10px;
  }

  .x-navbar.x-navbar-fixed-top .desktop .x-nav {
    margin-top: 20px;
  }
}

You should have something like this: http://prntscr.com/cr8puj

Hope this helps.

[VeritasMarketing]

Thanks what about my other question?

in the header of my site, its set to keep the main menu sticky with a colored background on scroll. Is there a way to keep the top bar sticky with this?

[Thai]

Hi There,

Please add the following CSS:

.x-topbar.x-topbar-fixed {
    position: fixed;
    top: 0;
    background: rgba(55, 55, 55, .8)!important;
}

.x-navbar.x-navbar-fixed-top {
    top: 38px;
}

After that add the following code under Customizer > Custom > Global Javascript:

jQuery(function($){
	var $topbar   = $('.x-topbar');
	$(window).scroll(function(event) {
		var $current        = $(this).scrollTop();
		if( $current > 0 ){
			$topbar.addClass('x-topbar-fixed');
		} else {
			$topbar.removeClass('x-topbar-fixed');
		}
	});
});

Hope it helps 🙂

[VeritasMarketing]

That didnt work, it just pushes the main menu down to make room for the topbar but no top bar.

[Thai]

Hi There,

There is a syntax error in your custom javascript.

I’ve already corrected that, please take a look at your website again.

Cheers!

[VeritasMarketing]

Thanks, its working better but still kinda weird. on the home page, after you scroll the bar dosnt go away when you scroll back up. it did before. also on the inside pages it dosnt stay blue.

[Jade]

Hi there,

Please update the JS code to:

jQuery(function($){
	var $topbar   = $('.x-topbar');
        var $nav      = $('.x-navbar');
	$(window).scroll(function(event) {
		var $current        = $(this).scrollTop();
		if( $current > 0 ){
			$topbar.addClass('x-topbar-fixed');
		} else {
			$topbar.removeClass('x-topbar-fixed');
                        $nav.removeClass('x-navbar-fixed-top');
		}
	});
});

Hope this helps.

[VeritasMarketing]

Thanks, that fixed the front page but not the inside pages?

[Jade]

Hi there,

Would you mind describing what should the header’s behavior be on scroll for the inner pages as I am not sure about it at the moment.

Thank you.

[VeritasMarketing]

sorry, right now the bar becomes transparent and should remain blue.

[Jade]

Hi there,

Please add this code in the customizer for that:

body:not(.home) .x-topbar.x-topbar-fixed {
    background-color: #0077c0 !important;
}

Hope this helps.

[VeritasMarketing]

That Worked Thank you all so much for all your help.

[Nico]

Happy yo hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts