How to make menu logo only show up when menu bar is sticky?

Question

Fairly new to Template Toaster.

I am working on a template.

I have created a sticky menu. That works fine.

What I want to do is Have a logo on the menu that only shows up when the menu bar sticks to the top of the page when scrolling.

If I add the logo to the menu bar I can hide it with custom CSS like this..

.navbar-default  .pt_menu_logo {
    display: none;
}

 

But for the life of me I can't figure out how to show it when the menu bar sticks.

This code would work, if I knew WHERE it needed to be at.

.navbar-default  .pt_menu_logo  {
    display: block;
}

 

I am not overly familar with CSS

 

Any Suggestions?

Answer 1

I kept play around and figured this out.

If anyone else could use this info... Here is it.

 

/* hides logo on menu when not sticky at top of page*/
.navbar-default  .pt_menu_logo {
    display: none;
}

/*shows logo on menu when it is sticky to top of page*/
nav#pt_menu.navbar-fixed-top .pt_menu_logo {
display: block;
}

Comments

Awesome!!
Thanks for the code!!

Regards
Edvardsen