I've been able to successfully implement SlickNav into my site using the suggested markup:

%nav
      #logo
        = link_to 'index.html#top' do
          = image_tag "logo.png"     
      %ul#menu
        %li
          = link_to "ONE", "#1"
        %li
          = link_to "TWO", "#2"
        %li 
          = link_to "THREE", "#3"
        %li 
          = link_to "FOUR", "#4"

At a certiain breakpoint, it hides the nav then displays the SlickNav - all good.

Where I'm stuck is that in the code that's outputted, it displays .slicknav_menu above everything else (just under the body) and I'm not sure where in the .js I can inclye a div for the logo?

<div class="slicknav_menu"><a href="#" aria-haspopup="true" tabindex="0" class="slicknav_btn slicknav_collapsed" style="outline: none;"><span class="slicknav_menutxt"></span><span class="slicknav_icon slicknav_no-text"><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></a><ul class="slicknav_nav slicknav_hidden" aria-hidden="true" role="menu" style="display: none;">
        <li>
          <a href="#1" role="menuitem" tabindex="-1">ONE</a>
        </li>
        <li>
          <a href="#2" role="menuitem" tabindex="-1">TWO</a>
        </li>
        <li>
          <a href="#3" role="menuitem" tabindex="-1">THREE</a>
        </li>
        <li>
          <a href="#4" role="menuitem" tabindex="-1">FOUR</a>
        </li>
      </ul></div>

Desired effect:

.jpg

I've been able to successfully implement SlickNav into my site using the suggested markup:

%nav
      #logo
        = link_to 'index.html#top' do
          = image_tag "logo.png"     
      %ul#menu
        %li
          = link_to "ONE", "#1"
        %li
          = link_to "TWO", "#2"
        %li 
          = link_to "THREE", "#3"
        %li 
          = link_to "FOUR", "#4"

At a certiain breakpoint, it hides the nav then displays the SlickNav - all good.

Where I'm stuck is that in the code that's outputted, it displays .slicknav_menu above everything else (just under the body) and I'm not sure where in the .js I can inclye a div for the logo?

<div class="slicknav_menu"><a href="#" aria-haspopup="true" tabindex="0" class="slicknav_btn slicknav_collapsed" style="outline: none;"><span class="slicknav_menutxt"></span><span class="slicknav_icon slicknav_no-text"><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></a><ul class="slicknav_nav slicknav_hidden" aria-hidden="true" role="menu" style="display: none;">
        <li>
          <a href="#1" role="menuitem" tabindex="-1">ONE</a>
        </li>
        <li>
          <a href="#2" role="menuitem" tabindex="-1">TWO</a>
        </li>
        <li>
          <a href="#3" role="menuitem" tabindex="-1">THREE</a>
        </li>
        <li>
          <a href="#4" role="menuitem" tabindex="-1">FOUR</a>
        </li>
      </ul></div>

Desired effect:

http://oi60.tinypic./2egcpky.jpg

• javascript
• jquery
• navigation
• slicknav

• Why do you need to include the logo in the JS? – APAD1 Commented Sep 3, 2014 at 18:45
• I don't if its not necessary - it's just that it calls the .slicknav_menu class from the JS - its not in my markup... – jkoler Commented Sep 3, 2014 at 19:13

6 Answers 6

Unfortunately with SlickNav there is no built-in way to add a logo to the left side of the menu.

The easiest way to acplish what you want would be to use JS and prepend the logo to the div with the class slicknav_menu and float it left.

http://jsfiddle/gadw2j4y/

I came across this question while searching for the answer to the same question and have applied the following code to my site with success.

<script type="text/javascript">
    $(document).ready(function(){
        $('.slicknav_menu').prepend('<a href="index.php"><img class="logo" src="images/logo.jpg" alt="Website Logo" /></a>');
    });
</script>

In CSS apply the following:

.logo {
float: left;
width: 25%;/*or whatever size you would like*/
height: auto;
}

You can add your logo into the label property.

$(function() {
    $('#menu').slicknav({
      label: '<div id="logo"><h1>Your Logo</h1></div>'
    });
});

Find this line of css code in slicknav.css file

.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table;}
.slicknav_menu:after { clear: both }

and replace it with

.slicknav_menu:after { content: url(../img/logo.png); display: table;}
.slicknav_menu:before { clear: both }

in the file .css you can find the code to set the logo as the background of the menu:

.slicknav_menu:before{
float: left;
height: 90px;
background: url(logo.png)no-repeat;
width: 110px;
margin-left: 7px;
margin-top: 7px;}

Remember change the height property to adjust it to your logo height, otherwhise your logo appers cut. Regards.

SlickNav supports the brand attribute which achieves exactly what you're looking for:

$('#mymenu').slicknav({
        brand: "<img src='/mylogo.png'>"
    });

I'm not sure if the feature was available at the time of your post, but it's definitely there and working now.