[nawilkesParticipant]

I would like the logo on my site to shrink to a smaller height once a user beings to scroll down, like on this site:

http://www.caritas.org/

Is this possible with X Theme?

Thanks!
Nick

[ChristianModerator]

Hey Nick,

Please update X and the plugins included first for the class x-navbar-fixed-top to toggle on and off when the Navbar is scrolled. Right now it stays on when you scroll down. We need it to toggle so we can make the logo small when you scroll down and back to its original size when you scroll to the top.

After the update, please see https://theme.co/x/member/forums/topic/layout-issues-after-updating-could-be-your-caching-plugin/ if you encounter layout issues.

Thanks.

[nawilkesParticipant]

Thanks! I updated the theme and plugins… I don’t have a caching plugin installed… I viewed the site in Chrome Incognito mode… does that take care of caching issues? The logo is not shrinking when I scroll though. Do I need to change something in Customize to toggle the setting? Or should it happen automatically? That’s the only part I’m unclear on.

Thanks!

[RadModerator]

Hi there,

The logo won’t scale down when scrolled. You will have to add additional customisation to do that. The easiest and quickest is by using css.

Add this css at your customizer’s custom css.

.x-navbar-fixed-top .x-brand img {
max-width: 110px;
width: 110px;
}
.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 35px;
padding-top: 40px;
}
.x-navbar-fixed-top .x-navbar-inner {
min-height: 95px;
}

Thanks!

[SEVEROParticipant]

Hi there

Couple of questions regarding the code above.

1. Is it possible to change out the logo when scrolling
2. Can you alter the height of the nav menu when scrolling

Cheers

[ChristianModerator]

Hey Severo,

Those are possible but you will need to add your own CSS to the provided CSS that serves as a guide on how to modify the Logo’s state when in scrolled view.

Thanks.

[chill986Participant]

I have a follow on question for this – My logo shrinks up fine on scroll, but I can’t figure out how to reduce the total height of the navbar area at the same time. Any suggestions? I can’t figure out just the right CSS for that.

Thanks!

[DarshanaModerator]

@chill986

Please provide us with the URL to your site, so that we can take a closer look and assist you with a possible workaround.

Thanks!

[chill986Participant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Please add following CSS under Custom > CSS in the Customizer:

.x-navbar-fixed-top, .x-navbar-fixed-top .x-navbar-inner {
    height: 66px;
}

.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 61px;
    padding-top: 24px
}

Thanks!

[chill986Participant]

Almost there – the main menu has a bottom border that appears when you hover over the menu item or when the menu item is active. The height of the menu area doesn’t change even though the wrapper does – you can see when you select “Referral Program” and then scroll down. Would love it if I can get the menu centered vertically within the nav container the way the logo is.

I appreciate any help you can give me!

[ThaiModerator]

Hi There,

Try adding following CSS:

.x-navbar.x-navbar-fixed-top {
    height: auto;
}

Hope it helps.

[chill986Participant]

Addding that in cancels out the shrinking of the header. I just think it would look better if it were shorter. 🙁

[Nabeel AModerator]

Hi again,

Try replacing the previous code with this:

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

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 70px;
    padding-top: 34px;
}

Let us know how it goes!

[chill986Participant]

Beautiful! Thank you!

[Author]

Posts