[Wardo_SDParticipant]

Hello,
I was hoping you could help me out with a problem I am having. I would like the logo in the sticky header of my site to change sizes on scroll. However, I have tried methods found in other threads and they did not work in this case. That is because I am using a centered logo in line with the nav. We had made a new menu item called logo, hid the text and replaced it with an image using CSS. The class we used for this logo item is .logo-menu-item. Please help! I’d really appreciate it.

[Wardo_SDParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Please replace the code in your custom css that reads

.x-navbar-fixed-top .logo-menu-item {
max-width: 25px !important;
width: 25px !important;
}
.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 30px !important;
padding-top: 40px !important;
}
.x-navbar-fixed-top .x-navbar-inner {
min-height: 95px !important;
}

with this

.x-navbar .desktop .x-nav > li.logo-menu-item {
      width: 175px;
      display: block;
      height: 75px;
}

.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    position: absolute;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li.logo-menu-item > a {
        background-size: contain !important;
    width: 120px;
    height: 120px;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li.logo-menu-item {
    width: 120px;
    display: block;
    height: 120px;
}

Hope that helps.

[Wardo_SDParticipant]

Hey!! Worked like a charm!! You rock!
Thanks a bunch!

[John EzraMember]

You’re most welcome!

[Author]

Posts