[Paul RModerator]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

.home .x-navbar {
   position:absolute;
   width:100%;
}

Hope that helps.

[reelismParticipant]

Again – that BREAKS the menu in ALL BROWSERS. This time the menu does not scroll.

Can you guys PLEASE TEST the code you’re telling me to use before you post it?

[RadModerator]

Hi there,

Sorry about that, was meant to be fixed positioning and for .masthead. Please try this one

.home .masthead {
    height: 0;
    position: fixed;
    width: 100%;
    z-index: 99999;
}

This tested directly on Firefox browser. If you have further issues, then please start a new thread. The longer it gets, the harder to manage and more confusing.

Thanks!

[jmartinosParticipant]

Hi.
I used the original CSS and JavaScript that was recommended to Angus M at the beginning of these thread to make my header shrink when scrolling down. I also added the additional CSS recommended to make the transition more smooth. It works great. The only problem is my logo shrinks really small now when scrolling. Is it possible to stop it from shrinking so much or at all? My site is: http://www.eliteithome.com/lp
Thanks!

[JoaoModerator]

Hi There,

It is indeed possible,

Please provide your WP Admin Credentials in a private reply so we can take a look at the code you used at the end. On the code you have the settings to adjust the size.

Thanks

[jmartinosParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Please add this CSS as well,

.x-navbar .x-brand {
    width: 299px;
}

Then change this CSS

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

to this

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

Then this CSS

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

to this

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

Cheers!

[donologyParticipant]

This is the code to make the image also transition without “jumping”. It works for me at least. 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”. There was also and issue with the content “jumping” down the page when the navbar returns to full size. I have added a fix for that also.

CSS:

.x-navbar.x-navbar-fixed-top .x-navbar-inner, .x-main.fixed-nav
{
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.x-navbar-inner, .x-navbar .x-brand img, .x-main
{
	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
{
	-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;
}

.x-main.fixed-nav
{
  	margin-top: -60px;
}

JS:

jQuery(function($) {

$(window).scroll(function(){

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

});

});

[Paul RModerator]

Thanks for sharing the code. Have a great day!

[reelismParticipant]

@donology could you please provide some more detail on this, i.e. how to : “.x-brand img” to the transition code also and only change the width of the image instead of the “.x-brand”

So noobs like me don’t stuff it up!?

Thanks,

Morgan

[LelyModerator]

Hello Morgan,

To explain those CSS this is how it works. By default, x-navbar-fixed-top class is not added on your page menu. This will only be added on scroll. There are different default properties for .x-brand img and .x-brand

This part of those custom CSS below says that all property values of this elements or classes should have smooth transition. See this:http://www.w3schools.com/css/css3_transitions.asp

.x-navbar.x-navbar-fixed-top .x-navbar-inner, .x-main.fixed-nav
{
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.x-navbar-inner, .x-navbar .x-brand img, .x-main
{
	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
{
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

Then on scroll, when x-navbar-fixed-top class is added, we specified a certain property. Like the width for .x-brand img and margin for .x-brand.

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

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

So the CSS transitions says that on scroll the width and top position of those elements will transition/change those property smoothly.

Hope this helps.

[reelismParticipant]

Hi @lely thanks, I appreciate that you’re trying to help me understand, yet I just wanted clarification of exactly where I make the changes, which wasn’t clear.

I’ve already got the header shrinking, but it doesn’t shrink smoothly.

While we’re at it, is there a demo available of the smooth shrinking effect?

[Paul RModerator]

Hi,

I would like to check but the login you have provided no longer works and your site is on maintenance mode.

Regretfully we have no demo for of the shrinking effect. It is not a feature by X,thus css and js code is needed for it to work.

Thanks

[reelismParticipant]

I don’t know what site you’re referring to, i’m working on localhost.

Could we just get some further explanation of exactly what to do with the code posted by @donology above?
I.e. step by step of how to insert the code provided.

Thanks!

[LelyModerator]

Hi There,

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.

Hope this helps.

[Author]

Posts