Navbar + Logo shrink on scroll

HI. I looked through the other topics and found Half the solution.

I would like the logo to shrink and for the navbar to resize (shrink up to the height of the top-level nav buttons only) on scroll.

The code I found in the forum changes the logo only.

@media(min-width: 980px){
.x-navbar.x-navbar-fixed-top .x-brand img {
width: 75px;
transition: all 100ms linear;
}
}

One thing-- I have an uber sub menu that I hope will still drop down over the body of the page on mousing over the parent nav button-- so any solution should keep this in mind.

can you help?

Thank you!!

Hello @satkins,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Hi,

For navbar resize, add the code below in Theme Options > CSS

.x-navbar{
  transition: all 100ms linear;
}

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

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 70px;
}

Then add this in Theme Option > JS

jQuery(function($){
  $(window).scroll(function(){   
    if($(this).scrollTop()==0){        
        $('.x-navbar').removeClass('x-navbar-fixed-top');
    }
  });
});

Hope that helps

That’s Awesome – it works great!

Last questions-- do I now delete the previous css that I was using? This seems to have complete control over the event.

and will this CSS and Java disappear if I update my theme?

Thanks again

Hello @satkins,

Please do not remove the previous css because it controls the width of the logo image. The CSS and JS given by @Paul is used to control the height of the navbar.

As long as you added the custom CSS and JS in the specified location, X > Theme Options, then it will not be overridden when there is a theme update.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.