Docs

[btbogan]

Hello there. Love the theme so far.

One effect I cannot find in the customizer is to be able to set a menu & logo size in sticky mode different than at the top.

I would like for it to transition smoothly as well.

As I looked in the forum topics any code I saw given made it a very abrupt switch.

Could you help me with a way to have the menu and logo shrink a little bit smaller upon scroll down and then back to full size when at the top again. And both of those movements to be a smooth transition.

thanks so much 🙂

Looking forward to using this theme fully!
God Bless.

[Prasant Rai]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[btbogan]

hey there, i thought i would be getting an email when someone replied so i totally never saw this until now.

is there a way I can set it somewhere to receive emails when someone replies?

also the site url is http://www.barrettbogan.com

🙂

thanks again.

[Rupok]

Hi there,

Yes you can subscribe your post to get email notification – http://prntscr.com/cnt21w

However it seems your website is under construction. Please take it off or provide us the credentials in private reply so that we can check and assist you on this.

Thanks

[btbogan]

oh nice haha.

ok thanks for showing me where to subscribe, I had never seen that before.

Also, I took the site out of construction for you 🙂

barrettbogan.com

thanks

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "65px");
			$('.x-navbar-inner').css("min-height", "65px");
			$('.x-brand img').css("width", "150px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "30px", "height": "65px"});
		} else {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "100px");
			$('.x-navbar-inner').css("min-height", "100");
			$('.x-brand img').css("width", "250px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "45px", "height": "100px"});
		}
	});
});

And then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-brand img {
    transition: all 0.3s ease;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[btbogan]

great, looks great. i like the ease of the logo.

3vmore things are not quite there yet though.

(1) The header does shrink but it does not have the same ease as the logo, so they see to go at different speeds, which is weird. How can I set the header transition to the same ease as the logo?

(2) Also the menu items. they jump up to stay centered and I would like them to ease at the same rate. So ultimately the logo, the header bar, and the menu items should al make their transition at the same rate.

(3) It seems that when the logo shrinks it is no longer vertically centered on the header (more space above than below). How to I fix that?

thanks so much.

[Rad]

Hi there,

Logo transition is based on CSS, while navbar size is based on static size through javascript. I tried applying the same CSS and it won’t work. Would you mind providing your login credentials? I like to test the CSS based resize instead of javascript.

Thanks!

[btbogan]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this code:

.x-navbar .desktop .x-nav>li a {
    transition: all 0.3s ease;
}

Update JS code to :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "65px");
			$('.x-navbar-inner').css("min-height", "65px");
                        $('.x-brand.img').css("margin-top", "11px");
			$('.x-brand img').css("width", "150px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "30px", "height": "65px"});
		} else {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "100px");
			$('.x-navbar-inner').css("min-height", "100");
                        $('.x-brand.img').css("margin-top", "20px");
			$('.x-brand img').css("width", "250px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "45px", "height": "100px"});
		}
	});
});

Hope that helps.

[btbogan]

OH MAN, haha perf. thanks so much.

And the last thing i can think of for now…

How can I make the header on mobile smaller? as in less height.

thank you so much.

[Rupok]

Hi there,

Thanks for writing back! You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 50px !important;
}

.x-brand.img {
  margin-bottom: 5px !important;
  margin-top: 5px !important;
}

.masthead-inline .x-btn-navbar {
  margin-top: 20px;
}
}

Hope this helps.

Cheers!

[btbogan]

ok

it seems to be making the section row scoot up instead of making the header shorter…?

[btbogan]

ok so once you scroll down and back up it is the desired height. but upon loading the page the header is actually bigger.

I would actually like the header to be that smaller height all the time on mobile as well as sticky so it doesn’t go anywhere.

[Rupok]

Hi there,

Let’s update the code a bit :

@media only screen and (max-width: 979px) {
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 50px !important;
}

.x-navbar {
  height: 70px;
  text-align: left;
}
.x-brand.img {
  margin-bottom: 5px !important;
  margin-top: 5px !important;
}

.masthead-inline .x-btn-navbar {
  margin-top: 20px;
}
}

Hope this helps.

[Author]

Posts