sticky nav bar showing in all views - html

Question

how to make responsive sticky navbar working in desktop using uikit
here is what i have tried
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar" style="background-color: rgba(0,0,0,.4)">
<nav class="uk-navbar-container uk-navbar-transparent uk-height-match" uk-navbar style="position: relative; z-index: 980;height: 77px;">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>
Parent
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active">Active</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</li>
<li>Item</li>
</ul>
</div>
</nav>
</div>
the navbar is working on all display views but i don't want it to work on tablet & mobile view
how can i achieve that ?

Answer 1

You can make a listener for window resize and when the window width is as a mobile size, hide your navbar, I made it once like this in your parent component :
data: function() {
return {
windowWidth: 0,
}
},
mounted() {
this.$nextTick(function() {
window.addEventListener('resize', this.getWindowWidth);
//Init
this.getWindowWidth()
})
},
methods: {
getWindowWidth(event) {
this.windowWidth = document.documentElement.clientWidth;
},
},
beforeDestroy() {
window.removeEventListener('resize', this.getWindowWidth);
}
And in your template for example (pseudo code):
<template>
<navbar v-if="windowWidth > 800px"></navbar>
</template>
Hope it helps