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

Home Forums Support How to put my logo on sticky menu?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #110250
    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!

    #110294
    Tom
    Lead Developer
    Lead Developer

    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! 🙂

    #110300
    Jan Sacdalan

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

    #110517
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #110519
    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..

    #110610
    Tom
    Lead Developer
    Lead Developer

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

    Let me know 🙂

    #110639
    Jan Sacdalan

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

    #110640
    Tom
    Lead Developer
    Lead Developer

    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>
    #110641
    Jan Sacdalan

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

    #110743
    Tom
    Lead Developer
    Lead Developer

    Hmm, maybe we’re getting too fancy..

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

    #110792
    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.

    #110843
    Tom
    Lead Developer
    Lead Developer

    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 */
    }
    #110853
    Jan Sacdalan

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

    #110854
    Tom
    Lead Developer
    Lead Developer

    Awesome! Glad we got it working 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.