Logo Overlap and Shrink with Pro Header

Support
#1

Hello!

I’m trying to make it so when you initially load the page, the logo is large and actually extends outside the header bar. Then, once you scroll, it shrinks down to size. This website has implemented what I’m looking to do.

I already looked in this forum for an answer, and the closest thing I found was this. I copied the CSS from this thread but it didn’t work for me. The logo did not change size when scrolling at all.

I’m currently developing on this dev site: https://file.tools/seidel if you want to take a look. Just FYI the logo is a temporary placeholder because we have a nice circular one on the way from the designer.

Thank you in advance for your help!

#2

Hi there,

Please add the CSS code below to Pro > Launch > Theme Options:

.x-masthead .x-image img {
    height: 150px;
    width: auto;
    margin: auto;
    transition: all 0.3s;
}

.x-masthead .x-bar-fixed .x-image img {
    height: 80px;
    transition: all 0.3s;
}

Try to play with the height values to find the best which will fit your design.

Thank you.

Centered logo above centered inline nav
#3

Thank you for the help! That worked for me!

#4

You’re welcome!
We’re glad we were able to help you out.

#5

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