How to align with the original menu

Try to use Sticky Class: #masthead

And add this code to plugin CSS Style:
.myfixed .site-branding {
display: none;
}

Let me know if this helps…

Or if you wanna keep your logo:

.myfixed .site-branding {
margin-left: 0;
margin-top: 0;
max-width: 100px;
}

Just don’t forget to remove code I sent in a previous thread…

Thank you for your reply. It’s sort of working. The menu only shows up half way down the first page and it creates a little jerky movement. I’d also like to keep the red background underneath the menu. Please advise. Thanks.

I see, hmm, it’s because masthead is positioned absolute… can you put it back, as it was before. I will try smth else.

maybe just try class .head-overflow

Using .head-overflow now. Menu fades in only half way through the first page and the menu still not aligned.

so leave .head-overflow for now

add this to prevent jumping, and get red background:

#mysticky-wrap {
    max-height: 0px;
}
#mysticky-nav .myfixed {
    background-color: #e10b0b;
}

I would suggest to use slide effect, so transition will look smooth.

hmm.. doesn’t work lol. What “slide effect” you were talking about?

Thanks.

Oh.. I think I’m getting closed. Just the red bar looks a bit weird in animation

Also, I want the logo to scroll with the page instead of disappearing.

OK. So the background color doesn’t sync with “Sticky Transition Time”. It’s always at 0 sec. It looks ok but I still prefer to have transition time ??

Stupid me. Removed .myfixed { background-color: #000; } The bar is working perfectly now. lol Just need to figure out the logo.

Well, I can see that you removed .site-branding div from .head-overflow . So If you know how to do that than you will know how to add new div inside .head-overflow element.

You should do smth like this with existing head-overflow div:

<div class="grid grid-pad head-overflow">
   
   <!-- new code to insert inside head-overflow element -->
   
   <div class="mystickymenu-branding">

      <a href="https://www.homecis.ca/" title="HOME CANADA IMMGRATION SERVICES" rel="home"><img src="https://www.homecis.ca/wp-content/uploads/2017/09/logo-4-e1506059850475.png" alt="HOME CANADA IMMGRATION SERVICES" width="1200"></a>
   
   </div>

   <!-- end of new code -->

    <div class="navigation-container"></div>

</div>

Than in your CSS (you can use plugin css style field as well) add smth like this:

.mystickymenu-branding { max width: 120px; }

Sorry, I’ve been slacking off and I’m back. ??

Nice and thank you for the code. I’m not yet sure if I want the logo on the header, as it is still work in progress. If I’m keeping the logo, the code may have to be inserted else where so it will go fade in and out with the black bar. And the menu seems to get pushed to the right by the logo right now.

Anyhow, is there any way to make the black bar fades out when returns to “home”?

Thanks ??

You can hide logo while menu is not sticky, but first you deleted your menu, it’s not pushed anywhere.

Code I sent you was example and you should only add content inside html comments:

<!-- new code to insert inside head-overflow element -->
<!-- end of new code -->

So use backup to revert your changes and just add content inside of html comment. let me know when it’s done.