I ran into problems with the offcanvas display when using compiled LESS (either using

strange, could you please provide an example via e.g. jsfiddle? (<a href="http://jsfid

Offcanvas + LESS about uikit HOT 6 CLOSED

uikit commented on July 18, 2024

Offcanvas + LESS

from uikit.

Comments (6)

aheinze commented on July 18, 2024

can you confirm this with the latest code base (14-08-2013)?

from uikit.

stefan-b commented on July 18, 2024

Yes, I downloaded it today an still have got the same problem with the new file. Before testing I've cleared all caches (browser and lessphp). When changing back to my modified file it works again.
Tested browsers are current versions of firefox, chrome, safari and IE.

from uikit.

stefan-b commented on July 18, 2024

Accidentally closed and now reopened.

from uikit.

aheinze commented on July 18, 2024

strange, could you please provide an example via e.g. jsfiddle? (http://jsfiddle.net)

from uikit.

stefan-b commented on July 18, 2024

I didn’t manage to install a functional example at jsfiddle because I couldn’t attach the needed .js and .less files.

But here is a simple html example which would be easy to run.

```
   jquery.js is 1.10.2
```
```
   uikit.js is 1.0.2
```
```
   less.js is 1.3.3.
```

<body>
    <header>
        <nav class="uk-navbar">
            <a data-uk-offcanvas="" class="uk-navbar-toggle uk-hidden-large" href="#my-id"></a>
            <ul class="uk-navbar-nav">
                <li><a href="#">x</a></li>
                <li><a href="#">y</a></li>
                <li><a href="#">z</a></li>
            </ul>
        </nav>
    </header>

    <!-- Off-canvas sidebar -->
    <div id="my-id" class="uk-offcanvas">
        <nav class="uk-offcanvas-bar">
            <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
                <li><a href="#">x</a></li>
                <li><a href="#">y</a></li>
                <li><a href="#">z</a></li>
           </ul>
        </nav>
     </div>   

    <main>
       <hgroup>
            <h1>Lorem ipsum</h1>
            <h2>Lorem ipsum dolor sit amet</h2>
        </hgroup>

        <article>
            <h3>Lorem ipsum</h3>
                <p>Lorem ipsum dolor sit amet.
        </article>
    </main> 

    <aside>
    </aside>

    <footer>
    </footer>

<script src="js/jquery.min.js"></script>
    <script src="js/uikit.min.js"></script>
</body>

from uikit.