Pro Header - Sticky Bar - How To Shrink Logo In Sticky Bar On Scroll

Support
#1

Hi,

I have a Pro header with two bars - both of which are set to sticky.

Bar 1: (Container 1) Telephone number - (Container 2) Logo - (Container 3) Off canvas modal toggle button
Bar 2: (Container 1) Ubermenu shortcode

The logo in Bar 1 is reasonably large on page-load. What I would like to achieve is that on page scroll, the logo shrinks to match the height of Container 3’s button.

Are you able to help advise how to do this?

Thanks,
Christopher

Make logo in header shrink on scroll
#2

Hello @cdnwhite,

Thanks for writing in!

To make the logo shrinks to match the height of your button, please edit your header and click the logo image element. Find the “Customize” tab and insert this inline element css:

.x-bar $el {
    transition: width 1s ease;
}

.x-bar.x-bar-fixed $el {
    max-width: 120px;
}

Feel free to change the number of seconds and the maximum width of the image element.

#3

Thanks RueNel,

That is almost there. The shrinking is perfect, but the overall bar does not shrink with it - there is a lot of whitespace above and below the shrunken logo, which appears to be to do with the original image height. I cannot work out the CSS to reduce the bar down to give, say, 5px padding top and bottom when shrunk. Are you able to help with this?
The screenshot shows the area I am trying to shrink.

Many thanks,
Christopher

#4

Hi Christopher,

You can try adding this in Header > CSS

.x-bar-fixed.topbar {
   height: 150px !important;
    width: 100%;
}

.x-bar-fixed.topbar .x-bar-content {
   height:130px !important;
}

.x-bar-fixed.menubar {
   top:150px !important;
}

You may change 130px and 150px to adjust the height of your bars.

Hope that helps.

#5

Hi Paul,

That doesn’t see to be reducing the padding or space above and below the logo when shrunk, I’m afraid.

Thanks,
Christopher

#6

Hi Christopher,

Please try changing the shrink value of your header bar (top bar) to something around 0 and 1, example, 0.8. The sample is in the screenshot.

Thanks!

#7

Hi Rad,

Almost perfect - thank you!

As an alternative, what would be the option to hide the logo image entirely when scrolling, but leaving the outer containers with the telephone number and button? With the logo just a bit too much screen real estate is taken up.

Many thanks,
Christopher

#8

Hi Christopher,

You can add this to your Image element’s Element CSS area.

.x-bar-fixed $el.x-image {
	display: none !important;
}

Thanks,

#9

Hi Friech,

That code does not seem to hide the image on scrolling or at all. Not sure why though.

Thanks,
Christopher

#10

Hi There,

Please try with this custom CSS instead:

.x-bar-fixed $el .x-image {
	display: none !important;
}

Let us know how it goes!

#11

Sorry, same as before. The logo image remains in place. Do you have any other ideas?

Thanks,
Christopher

#12

Hello Christopher,

Sorry if the code did not work. Please have the code updated and use this from my original code:

.x-bar $el {
    transition: width 1s ease, opacity 1s ease;
    opacity: 1;
}

.x-bar.x-bar-fixed $el {
    max-width: 120px;
    opacity: 0;
}

By the way, this code should be added in the image inline element css in the “Customize” tab.

Please let us know if this works out for you.

#13

Hi RueNel,

It works! Thank you. I admit I failed to see the “inline” in your original message and had been using the Header’s CSS for the code.

One FINAL query, there is padding or margin above the topbar, which I think is coming from the container height of the telephone number and button. How can this be reduced to be minimised?

Thank you for all help,
Christopher

#14

Hello Christopher,

The padding is actually a space provided by the flex layout. If you set a smaller width for the logo image then the space will also reduce. Please have the css updated and use this:

.x-bar $el {
    transition: width 1s ease, opacity 1s ease;
    opacity: 1;
}

.x-bar.x-bar-fixed $el {
    max-width: 100px;
    opacity: 0;
}

Hope this helps.

#15

Thank you. I am beginning to understand flex a little more. Your help has enabled me to get to 99% of where I wanted to be. I hope this thred helps others as well!

#16

You are most welcome!
We really appreciate for letting us know that it has worked for you.

#17

Your team’s support is excellent and is one of the main reason I have bought so many licences of Pro (both directly and by putting all of my clients though Themeco)!

#18

Thanks for the very nice feedback.

#19

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