Responsive navigator in UIKit 3?
I migrated my website to UIkit 3 instead of Bootstrap 4. But I got stuck on the navigation bar for a while. Right now my navbar is built in Bootstrap 4 and looks like this:
https://jsfiddle.net/eztwL9p7/1/
<nav class="navbar navbar-toggleable-sm sticky-top navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<a class="navbar-brand">brand</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link">Blog <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
<auth-partial>
<ul class="nav navbar-nav">
<li class="nav-item float-xs-right">
<a href="#" class="nav-link">Log in</a>
</li>
</ul>
</auth-partial>
</div>
</nav>
So it's just a regular navigation bar, but when the page is small enough, a toggle button appears and the items become a dropdown. I've tried to port this to UIKit, but I don't see any possibility for this in their templates. If I understand correctly, it seems like I need to make 2 navbars, one for the normal view and then the smaller one?
The Navbar documentation assumes the .uk-navbar-toggle
class and .uk-navbar-toggle-icon
are added as shown below - as a result of the toggle icon - but without an expandable menu, nor is it able to hide the specified menu items like Bootstrap can do.
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
</div>
</nav>
The Navbar documentation recommends using an Off-canvas component (a sidebar that slides across the page and back) or a modal component, but neither will cause a Bootstrap-style toggle menu to appear.
Screenshots showing how a responsive navigation bar toggles / hides specified elements on smaller screens in Bootstrap:
Normal size screen - all menu items are displayed: 
Smaller screen - some or all of the menu items are hidden: 
Smaller screen - pressing Menu displays the menu items: 
source to share
Obviously, UIkit expects an implementation with duplicate navigation bars, each of which is only visible in the corresponding viewport. This is their own website. In my opinion, this is not always a good idea. I strongly oppose such workarounds because to me it looks like an unnecessary way to make menus less maintainable, less accessible, less structured, less readable or computer-readable, more error-prone, and not to mention duplicate content that can have a negative impact. on SEO. This was one of the biggest disappointments I have encountered when opening this magnificent structure that has a lot of potential indeed. The lack of an out-of-the-box toggle and stackable navigation bar is a big NO, NO - sorry UIkit dev team.Besides that, UIkit is an amazing toolkit.
If anyone wants to use modal or custom solutions as per their guidelines, feel free to do so. But in this case, I still recommend not duplicating content on your site. Perhaps Javascript could be used to move content dynamically.
I personally maintain a bootable Navbar solution without duplicate content. It is currently used by many major websites. So why not support it?
Requirements:
- Horizontal navigation bar for vertical display in smartphone
- Toggle navigation bar "hidden" and "hamburger icon" displayed when reaching the smartphone view
- Toggle icon shows / hides navigation bar in smartphone view
- Navbar never hides in desktop mode no matter if toggle icon was used or not
Decision:
Yes, ugly, I know ...
<nav class="uk-navbar-container uk-flex-column uk-flex-top" data-uk-navbar data-uk-toggle="media: @s; cls: uk-flex-row uk-flex-top; mode: media">
<button type="button" data-uk-toggle="target: .navbar-collapse; cls: hidden-up-to-s" class="uk-navbar-toggle uk-hidden@s" data-uk-navbar-toggle-icon></button>
<div class="navbar-collapse hidden-up-to-s">
<div class="uk-navbar-left">
<ul data-uk-toggle="media: @s; cls: uk-navbar-nav uk-padding-remove; mode: media" class="uk-nav uk-nav-primary uk-padding-small">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</nav>
And a little custom CSS to keep the navigation bar hidden only in the smartphone view:
.hidden-up-to-s {
display: none;
}
@media (min-width: 640px) { /* @breakpoint-small */
.hidden-up-to-s {
display: block;
}
}
More examples here: https://codepen.io/Hrvoje-Go/pen/LKWojr
source to share
Late answer ... With some CSS you can modify the UiKit Navbar to work like Bootstrap responsive Navbar. Note that this sample doesn't look pretty - I've tried to keep the CSS as short as possible.
On mobile (touch), dropdowns open / close on touch event (this is a built-in UiKit feature).
.uk-navbar {
min-height: 50px;
}
.uk-navbar button.navbar-toggle {
position: absolute;
right: 0;
top: 0;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid #ddd;
border-radius: 4px;
}
.uk-navbar button.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #888;
}
.uk-navbar button.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
.uk-navbar .uk-navbar-nav {
flex-wrap: wrap-reverse;
align-self: flex-end;
}
.uk-navbar .uk-navbar-nav > li > a {
min-height: auto;
line-height: 3em;
}
@media (max-width: 959px) {
.uk-navbar .toggle-target.collapsed {
display: none;
}
.uk-navbar .toggle-target .uk-navbar-nav {
display: block;
top: 50px;
position: absolute;
left: 0;
right: 0;
width: 100%;
background: #f8f8f8;
}
.uk-navbar .toggle-target .uk-navbar-nav li a {
display: block;
min-height: 0;
line-height: 2em;
padding: 0 15px !important;
}
.uk-navbar .toggle-target .uk-navbar-dropdown {
width: 90%;
min-width: 200px;
}
.uk-navbar .toggle-target .uk-navbar-dropdown[class*='uk-navbar-dropdown-bottom'] {
margin-top: 0;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
a#logo {
align-items:baseline
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-core.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit-core.min.css" rel="stylesheet"/>
<section id="mainnav">
<nav class="uk-container" uk-navbar>
<button type="button" class="navbar-toggle uk-hidden@m" uk-toggle="target:.toggle-target; cls:collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="uk-navbar-brand">
<a href="/" id="logo" class="uk-navbar-item uk-logo">LOGO</a>
</div>
<div class="uk-navbar-right toggle-target collapsed">
<ul class="uk-navbar-nav">
<li class="active"><a href="#">Company</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="#">About Us </a></li>
<li><a href="#">Quality & Environment</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">History</a></li>
</ul>
</div>
</li>
<li><a href="#">Services</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="#">Programming</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Consultancy</a></li>
</ul>
</div>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Carriere</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</section>
source to share