YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar marfe.sohler asked

is there a change to make a custom offcanvas on yootheme pro?

If so, how? please help.
I am talking the custom offcanvas button in Warp 7 framework templates where in the uikit page the offcanvas button.

I did it exactly in yootheme pro but not working, does not even show the button.
here is what i did, i put the html code below in custom html module, publish without position and use the jmodule element in the builder to load the module.

I am hoping that there is another way to do this. but if not hope this will add as an element in the builder because i love this functionality.

<button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Off-canvas</button>

<div id="offcanvas-1" class="uk-offcanvas">
<div class="uk-offcanvas-bar">

    <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>  
        <li><a href="#">Item</a></li>  
        <li class="uk-active"><a href="#">Active</a></li>

        <li class="uk-parent">  
            <a href="#">Parent</a>  
            <ul class="uk-nav-sub">  
                <li><a href="#">Sub item</a></li>  
                <li><a href="#">Sub item</a>  
                    <ul>  
                        <li><a href="#">Sub item</a></li>  
                        <li><a href="#">Sub item</a></li>  
                    </ul>  
                </li>  
            </ul>  
        </li>

        <li class="uk-parent">  
            <a href="#">Parent</a>  
            <ul class="uk-nav-sub">  
                <li><a href="#">Sub item</a></li>  
                <li><a href="#">Sub item</a></li>  
            </ul>  
        </li>

        <li><a href="#">Item</a></li>

        <li class="uk-nav-header">Header</li>  
        <li><a href="#"><i class="uk-icon-star"></i> Item</a></li>  
        <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li>  
        <li class="uk-nav-divider"></li>  
        <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li>  
    </ul>

    <div class="uk-panel">  
        <h3 class="uk-panel-title">Title</h3>  
        Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr.  
    </div>

    <div class="uk-panel">  
        <h3 class="uk-panel-title">Title</h3>  
        Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr.  
    </div>

</div>  

</div>

  • UIkit
  • YOOtheme Pro

Edited

2 Answers

Know someone who can answer? Share a link to this question via email or twitter.