This code is written for navbar using Uikit Css Framework.In navbar there is one dropdown list. when i clicked dropdown list it only show the content of middle section.but i want to show that dropdown list content with full container. What would be the best possible method to show the dropdown list with full container.
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-card uk-card-default " style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-container uk-container-expand uk-box-shadow-medium" id="nav-wrapper">
<nav class="uk-navbar-container" uk-navbar id="navbar">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle uk-hidden@l" href="#" uk-toggle="target: #offcanvas-nav">
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left"></span>
</a>
<ul id="menu1" class="uk-navbar-nav">
<a class="uk-navbar-item uk-logo" href="#"><img src="{{asset('img/logo.png')}}" alt=""></a>
<li class="uk-active"><a href="/">link</a></li>
<!-- This is the dropdown -->
<li class=""><a class="menu-full-width" href="#">dropdown</a>
<div class=" uk-dropdown uk-dropdown-navbar uk-dropdown-width-4" data-uk-dropdown="{justify:'#menu2'}">
<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar uk-container uk-container-expand">
<li class="uk-parent"><a href="#">Showcase Grid </a>
<ul class="uk-nav-sub">
<li><a href="#">Column 2</a></li>
<li><a href="#">Column 3</a></li>
<li><a href="#">Column 4</a></li>
<li><a href="#">Column 5</a></li>
<li><a href="#">Column 6</a></li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent"><a href="#">Showcase Masonry</a>
<ul class="uk-nav-sub">
<li><a href="#">Column 2</a></li>
<li><a href="#">Column 3</a></li>
<li><a href="#">Column 4</a></li>
<li><a href="#">Column 5</a></li>
<li><a href="#">Column 6</a></li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent"><a href="#">Portfolio Grid</a>
<ul class="uk-nav-sub">
<li><a href="#">Column 2</a></li>
<li><a href="#">Column 3</a></li>
<li><a href="#">Column 4</a></li>
<li><a href="#">Column 5</a></li>
<li><a href="#">Column 6</a></li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent"><a href="#">Portfolio Mosaic</a>
<ul class="uk-nav-sub">
<li><a href="#">Column 2</a></li>
<li><a href="#">Column 3</a></li>
<li><a href="#">Column 4</a></li>
<li><a href="#">Column 5</a></li>
<li><a href="#">Column 6</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- end dropdown -->
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
<li><a href="#">item6</a></li>
</ul>
</div>
</nav>
</div>
</div>The important part here is the uk-drop="boundary: #navbar;".
You can find the example with justified dropdown in the docs.
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet" />
<nav class="uk-navbar-container" uk-navbar id="navbar">
<div class="uk-navbar-left">
<ul id="menu1" class="uk-navbar-nav">
<li class="uk-active"><a href="/">link</a></li>
<!-- This is the dropdown -->
<li class="">
<a class="menu-full-width" href="#">dropdown</a>
<div class="uk-dropdown uk-dropdown-navbar" uk-drop="boundary: #navbar; boundary-align: true; pos: bottom-justify;">
<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar uk-container uk-container-expand">
<li class="uk-parent"><a href="#">Showcase Grid </a>
<ul class="uk-nav-sub">
<li><a href="#">Column 2</a></li>
<li><a href="#">Column 3</a></li>
<li><a href="#">Column 4</a></li>
<li><a href="#">Column 5</a></li>
<li><a href="#">Column 6</a></li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent"><a href="#">Showcase Masonry</a>
<ul class="uk-nav-sub">
<li><a href="#">Column 2</a></li>
<li><a href="#">Column 3</a></li>
<li><a href="#">Column 4</a></li>
<li><a href="#">Column 5</a></li>
<li><a href="#">Column 6</a></li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent"><a href="#">Portfolio Grid</a>
<ul class="uk-nav-sub">
<li><a href="#">Column 2</a></li>
<li><a href="#">Column 3</a></li>
<li><a href="#">Column 4</a></li>
<li><a href="#">Column 5</a></li>
<li><a href="#">Column 6</a></li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent"><a href="#">Portfolio Mosaic</a>
<ul class="uk-nav-sub">
<li><a href="#">Column 2</a></li>
<li><a href="#">Column 3</a></li>
<li><a href="#">Column 4</a></li>
<li><a href="#">Column 5</a></li>
<li><a href="#">Column 6</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- end dropdown -->
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
<li><a href="#">item6</a></li>
</ul>
</div>
</nav>