[Resolved] How to put my logo on sticky menu?

[Jan Sacdalan]

Hi Tom,

I’m using a plugin called “mystickymenu” and I can’t figure it out how to put my logo on the sticky menu. Can you help me out on this? here’s my site http://janwithaina.com

By the way, I’m loving your theme!

Thanks in advance!

[Tom]

Tough one! The plugin is wrapping the sticky nav below where the logo is showing up, so it’s leaving the logo behind.

I’ll have to play with this a bit in the morning – I’ll get back to you with a solution ASAP! 🙂

[Jan Sacdalan]

Thanks Tom! I’ll wait for your reply soon 🙂 Your $30 add ons are super worth it!

[Tom]

Sorry for not getting back to you sooner – this is a tough one because of where the plugins adds the sticky HTML into the document.

I think our only option is to add some JS to move the site logo into the plugins HTML structure on scroll.

You can add this using GP Hooks in the wp_footer hook:

<script>
      jQuery(window).scroll(function() {
            if( this.offset.top >= 320 && this.width() >= 800 ) {
                  jQuery(".site-logo").prependTo("#mysticky-wrap");
            } else {
                  jQuery(".site-logo").prependTo(".inside-navigation");
            }
      });
</script>

Give it a shot – it might need some tweaking 🙂

[Jan Sacdalan]

No Worries!

Anyways, the JS is not working. I paste the JS in to my wp_footer hook, clear the cache, but nothing happen. This is really a tough one..

[Tom]

Did you remove the code after adding it? I’m not seeing it in your source.

Let me know 🙂

[Jan Sacdalan]

soory my bad 🙂 you can check it again. Also, the JS made my fixed widget delayed when I scroll the page down..

[Tom]

Try this instead.

I’m working on my own sticky nav/header script, so this should only be temporary 🙂

<script>
      jQuery(window).scroll(function() {
            if( jQuery(window).offset.top >= 320 && jQuery(window).width() >= 800 ) {
                  jQuery(".site-logo").prependTo("#mysticky-wrap");
            } else {
                  jQuery(".site-logo").prependTo(".inside-navigation");
            }
      });
</script>

[Jan Sacdalan]

still no logo 🙁 but the fixed widget is back to normal. 🙂

[Tom]

Hmm, maybe we’re getting too fancy..

While configuring the plugin, what happens if you set the “Sticky class” to “.main-navigation”?

[Jan Sacdalan]

after I put .main-nav to “sticky class”, the menu choices are not align in the sticky navigation. So I made my sticky background color to clear and then put this codes to “.myfixed css class” in the plugin’s settings

.myfixed { margin: 0 auto!important; float:none!important; border:0px!important; background:white!important; max-width: 100%!important; border-bottom: 5px solid #970000!important; box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.5)!important; }

The menus are align but my logo is not in sticky nav.

[Tom]

What happens if you put “.main-navigation” as the sticky class? I tested this on my localhost and it seemed to work well?

Since your menu is contained, you may need to add this CSS:

#mysticky-nav {
  width: auto !important;
  left: 50% !important;
  margin-left: -550px; /* half of your container width */
}

[Jan Sacdalan]

OMG Tom! YOU ARE GENIUS! It WORKS! thank you for helping me out there. you are awesome!

[Tom]

Awesome! Glad we got it working 🙂

[Author]

Posts