Stacked Header Logo In Navbar On Scroll Only

[allcal]

My site https://beachcandyswimwear.com/ has a stacked header layout with a fixed top navbar.

What I would like to accomplish is make a menu item in the navbar that is the logo image (smaller), but only have that menu item appear only after the fixed top scroll starts. Basically showing the logo in the navbar when it is fixed top on scroll and after the logobar disappears (don’t want two logos appearing in the header at the same time). A short appear transition in for the navbar logo image would be nice too.

I would prefer this than creating the logobar also being sticky as that’s a lot of area scrolling down the page.

The ultimate goal is have the logo appear in the navigation bar on scroll only.

Thanks in advance!

[ruenel]

Hello @allcal,

Thanks for writing in!

Please be advised that there are only two choices for the navbar. That is the following:

1.) The stacked navbar wherein the logobar will display and the navigation menu below;

2.) The inline navbar wherein the logo is displayed to the left side and the navigation menu to the right side.

Regretfully, what you are trying to do requires custom development and it is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[allcal]

It actually wasn’t hard to figure out. It wasn’t a custom development question, just two pieces of css. I just added a menu item (menu-item-26790) and added the css below since the navbar changes css when fixed from .x-navbar -> .x-navbar-fixed-top

---

.x-navbar li#menu-item-26790{
display:none }

.x-navbar-fixed-top li#menu-item-26804{
display:inline-block;
-webkit-animation: slide-down .3s ease-out;
-moz-animation: slide-down .3s ease-out;
}

@-webkit-keyframes slide-down {
0% { opacity: 0; -webkit-transform: translateY(-100%); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
0% { opacity: 0; -moz-transform: translateY(-100%); }
100% { opacity: 1; -moz-transform: translateY(0); }
}

[paul.r]

Hi @allcal,

Glad you were able to figure it out. Have a great day!