logo on swap on scroll using Menu Plus, Sticky Menu

[Michael]

I am using Menu Plus Sticky Menu with a dark background-color on scroll and I want to be able to swap my logo on scroll (image-header)..Does anyone have any ideas? thanks Michael

/* for hover */
/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    display: block;
    width: 0;
    height: 2px;

    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: 50%;
}

/* trans*/
.home .main-navigation:not(.navigation-clone) {
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    width: 100%;
    top: 0;
}

/* on scroll */
.main-navigation, .main-navigation ul ul {
    background-color: #222222;
    /*background-color: rgba(255,255,255,0.5);*/
}

[Tom]

Hmm, well when scroll isn’t happening, I would use the regular logo with the navigation floating right.

That way, you can upload your different logo inside the sticky menu on scroll.

Otherwise, you would have to use javascript to detect the scroll and switch out the logo.

Let me know if that makes sense or not 🙂

[Author]

Posts