Overlap header logo & resize on scroll

Support
#1

Hi, I’m using a basic X install and I’d like to make the header logo overlap the hero image on each page UNTIL the page scrolls, then I’d like the image to shrink (screenshots). How do I do this?
Thanks in advance for your help!

#2

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!

#4

Hello There,

Thanks for writing in! To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

@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: 60px;
        transition: height 0.35s ease;
    }

}

Hope this helps. Please let us know how it goes.

#5

Thank you!
That looks cool!
Regards,
Rob

I notice this code makes the breadcrumbs disappear on the scroll… how do we fix that?

#6

Glad we could help.

Cheers!

#7

Hi,
I’m trying to achieve the same overlap and shrink affect but I can’t seem to get it to work properly. To start, my image will not show up until I scroll down the page. I used the css code given here.

Thank you

#8

Hi There,

Please create a new thread and provide your credentials in a secure note.

Please add a link to this thread so we can have it as a reference.

Thank you for understanding.

#9

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