Logo image Overlap and resize on scroll

Hi,
I would like my logo image to overlap the navbar and shrink on scroll. I tried following the css code on another thread but I can’t seem to get it to work properly. To start, my image will not appear until I scroll down the page and is extremely tiny.

Thank you!

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

Hi yes i can!

Hey there,

Try setting your Logo Width to 160.

Thanks.

Doesn’t seem to work. And on scroll the navbar is getting wider and the bigger I made the logo the wider the navbar.

Hi There,

There are quite a lot of errors on your console. Customizer worked for a while and stopped for me as well, the changes do not reflect on the site.

I have made some changes

Your older header CSS code is here :

@media(min-width: 980px){
    .x-brand {
        font-size: 40px;
    }

    .x-navbar .x-brand img {
        position: absolute;
        transition: height 0.35s ease;
    }

    .x-navbar.x-navbar-fixed-top .x-brand img {
        position: relative;
        width: auto;
        max-height: 100px;
        transition: height 0.35s ease;
    }

} 

I have added a different CSS under the comments /*Header/ on your Therme Options CSS and Theme Options JS

Would mind adding this in your wp-config.php located at the root directory of your site.

define( ‘WP_MEMORY_LIMIT’, ‘256M’ );
define( ‘WP_MAX_MEMORY_LIMIT’, ‘512M’ );

You can add it before the line

/* That’s all, stop editing! Happy blogging. */

Here you have a video tutorial in any case:

Let us know how it goes.

You also could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes!