Add a fixed logo to top of jquery menu?

Question

Does anyone know if it's possible to add a logo/image to the top of a jquery mmenu that stays fixed while submenus are accessed?

I've tried using the headers add-on, but have had zero luck getting that to work even with just text.

Any help would be great.

Thanks.

Answer 1

Since mmenu kinda looks at all the tags and clones it, i found it's best to prepend it after pageload. for instance, my code looks like this. (You could ignore most of my options, and replace with your own.)

         $(document).ready(function() {
            $("#menu").mmenu({
               "classes": "mm-slide mm-light",
               "header": true,
      "": true,
               "searchfield": {
                  "placeholder": "Search",
                  "add": true,
                  "search": true
               }
         });
           
   var VarName = "<div id='forStyling'><img src='images/globe.png' alt='' /><a href='/'>Company Home</a></div>";
   $('nav#menu').prepend(VarName);
   });

Only problem with this is, they also absolutely position their elements within that mmenu. So i had to add some custom css to drop it all down. In my example the logo was 40px tall i think (including padding)

  .mm-menu > .mm-search {top:40px;}
  .mm-menu.mm-hassearch .mm-header {top:90px;}
  .mm-menu.mm-hasheader.mm-hassearch > .mm-panel.mm-list {padding-top:140px;}

Answer 2

Thanks for this. I had the same query and it worked perfectly. I notice some of the CSS classes have changed since the answer.

.mm-panels{
top:100px;
}

to expose the custom DIV.

Answer 3

You can do this by using below js:

<script type="text/javascript">
            $(function() {
                $('nav#smenu').mmenu({
                    navbars     : [
                        {
                    height  : 4,
                    position    : 'top',
                    content     : [                         
                            '<div id="logo" class="site-logo"><img src="../logo.png"></div>',
                                'prev',
                                'title'
                            ],
                    }
                    ]
                });
            });
</script>

The tricky is have your top content in html format like above, set position:top, and height in 1~4, 1=top:40px, and 4=top:160px.

This code may not fit for your situration, but this is how it works.