Clever Geek Handbook

Use the SlickNav logo

I was able to successfully implement SlickNav on 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"

On the certiain breakpoint, it hides the navigation and then displays the SlickNav - all is well.

Where am I stuck with the fact that in the outputted code it displays the .slicknav_menu above everything else (just below the body) and I'm not sure where in the .js I can include the 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.com/2egcpky.jpg

+3


source to share


5 answers


Unfortunately, SlickNav doesn't have a built-in way to add a logo to the left side of the menu.

The easiest way to accomplish what you want is to use JS and add the logo to a div with a class slicknav_menu

and place it to the left.



http://jsfiddle.net/gadw2j4y/

+3


source


I came across this question while looking for an answer to the same question and have successfully applied the following code to my site.

<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;
}
+3


source


You can add your logo to the label property.

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


source


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 }
0


source


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

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

Remember to change the height property to adjust it to the height of your logo while others cut the logo. Regards.

0


source






More articles:


All Articles