| Server IP : 54.36.91.62 / Your IP : 216.73.217.117 Web Server : Apache System : Linux webm013.cluster127.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 User : coopiak ( 151928) PHP Version : 8.3.23 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/coopiak/amisdesseniors-fr/voscatalogues/templates/yootheme/packages/styler/tests/ |
Upload File : |
<style>
.test {
display: block;
position: relative;
z-index: 1;
width: 100%;
margin-left: 0;
}
</style>
<div class="js-navbar-1">
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #dropdown">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="container: body">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Dropdown</a>
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href>Active <span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">2 Columns <span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: home"></span> Stretch <span uk-navbar-parent-icon></span></a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-large" uk-drop="container: body; boundary: .js-navbar-1 .uk-navbar; stretch: x; flip: false">
<div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li><a href="#">
<div>
Item <div class="uk-navbar-subtitle">Subtitle</div>
</div>
</a></li>
</ul>
<div class="uk-navbar-item">
<div>Some <a href="#">Link</a></div>
</div>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#">
<span class="uk-margin-xsmall-right">Menu</span> <span uk-navbar-toggle-icon></span>
</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-large" uk-drop="container: body; boundary: .js-navbar-1 .uk-navbar; stretch: x; flip: false">
<div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-section uk-section-default">
<div id="dropdown" class="uk-container">
<h3 class="uk-h4">Dropdown and Dropbar</h3>
<div uk-grid>
<div class="uk-width-1-3@m">
<div class="uk-drop uk-navbar-dropdown test">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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 class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div class="uk-width-1-3@m">
<div class="uk-drop uk-navbar-dropdown test">
<ul class="uk-nav uk-nav-secondary">
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
</ul>
</div>
</div>
<div class="uk-width-1-3@m">
<div class="uk-drop uk-dropbar uk-dropbar-top uk-navbar-dropbar test">
<div class="uk-drop uk-navbar-dropdown uk-navbar-dropdown-dropbar test">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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 class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-navbar-2">
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #dropbar">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar="container: body; target-y: .js-navbar-2 .uk-navbar-container; dropbar: true; dropbar-anchor: .js-navbar-2 .uk-navbar-container">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href>Active</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">2 Columns</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: home"></span> Stretch</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-dropbar-large" uk-drop="container: body; boundary: .js-navbar-2 .uk-navbar; stretch: x; flip: false">
<div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li><a href="#">
<div>
Item <div class="uk-navbar-subtitle">Subtitle</div>
</div>
</a></li>
</ul>
<div class="uk-navbar-item">
<div>Some <a href="#">Link</a></div>
</div>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#">
<span class="uk-margin-xsmall-right">Menu</span> <span uk-navbar-toggle-icon></span>
</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-dropbar-large" uk-drop="container: body; boundary: .js-navbar-2 .uk-navbar; stretch: x; flip: false">
<div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-section uk-section-default">
<div id="dropbar" class="uk-container">
<h3 class="uk-h4">Large Dropdown and Large Dropbar</h3>
<div uk-grid>
<div class="uk-width-1-3@m">
<div class="uk-drop uk-navbar-dropdown uk-navbar-dropdown-large test">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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 class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
<div class="uk-width-1-3@m">
<div class="uk-drop uk-navbar-dropdown uk-navbar-dropdown-large test">
<ul class="uk-nav uk-nav-secondary">
<li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
<li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
</ul>
</div>
</div>
<div class="uk-width-1-3@m">
<div class="uk-drop uk-dropbar uk-dropbar-top uk-navbar-dropbar test">
<div class="uk-drop uk-navbar-dropdown uk-navbar-dropdown-dropbar uk-navbar-dropdown-dropbar-large test">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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 class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-navbar-3">
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #dropdown">
<nav class="uk-navbar-container uk-navbar-primary">
<div class="uk-container">
<div uk-navbar="container: body">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Primary</a>
<ul class="uk-navbar-nav">
<li class="uk-active">
<a href>Active</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">2 Columns</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent"><a href="#">Parent</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: home"></span> Stretch</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-large" uk-drop="container: body; boundary: .js-navbar-3 .uk-navbar; stretch: x; flip: false">
<div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</li>
<li><a href="#">
<div>
Item <div class="uk-navbar-subtitle">Subtitle</div>
</div>
</a></li>
</ul>
<div class="uk-navbar-item">
<div>Some <a href="#">Link</a></div>
</div>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#">
<span class="uk-margin-xsmall-right">Menu</span> <span uk-navbar-toggle-icon></span>
</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-large" uk-drop="container: body; boundary: .js-navbar-3 .uk-navbar; stretch: x; flip: false">
<div class="uk-drop-grid uk-child-width-1-3@m" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<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></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-section uk-section-default">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
</div>