Hi,
I wonder if you can help me. I have designed a nav that should be responsive on a mobile platform. However when I inspect the element as mobile the toggle function does not work. Can anyone help? I was unable to upload the php file so I have placed the code below.
<!DOCTYPE html>
<html>
<head>
<title>N.E Design&Make</title>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/uikit/css/uikit.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="uk-navbar">
<div class="uk-container uk-container-center">
<a href="" class="uk-navbar-brand uk-hidden-small" >...</a>
<ul class="uk-navbar-nav uk-hidden-small">
<li class="uk-active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li class="uk-parent"><a href="">Gallery</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Contact</a></li>
</ul>
</ul>
<div class="uk-navbar-flip uk-hidden-small">
<ul class="fa-ul">
<a href=""><i class="fa fa-facebook fa-2x"></i></a>
<a href=""><i class="fa fa-twitter fa-2x"></i></a>
<a href=""><i class="fa fa-instagram fa-2x"></i></a>
</div>
<a href="#offcanvas-nav" class="uk-navbar-toggle uk-visible-small data-uk-offcanvas"></a>
<div class="uk-navbar-content uk-navbar-center uk-visible-small">...</div>
</nav>
<div id="offcanvas-nav" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas data-uk-nav>">
<li class="uk-active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li class="uk-parent"><a href="">Gallery</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div class="uk-block uk-block-secondary">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/uikit/js/uikit.min.js"></script>
</body>
</html>
I wonder if you can help me. I have designed a nav that should be responsive on a mobile platform. However when I inspect the element as mobile the toggle function does not work. Can anyone help? I was unable to upload the php file so I have placed the code below.
<!DOCTYPE html>
<html>
<head>
<title>N.E Design&Make</title>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/uikit/css/uikit.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="uk-navbar">
<div class="uk-container uk-container-center">
<a href="" class="uk-navbar-brand uk-hidden-small" >...</a>
<ul class="uk-navbar-nav uk-hidden-small">
<li class="uk-active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li class="uk-parent"><a href="">Gallery</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Contact</a></li>
</ul>
</ul>
<div class="uk-navbar-flip uk-hidden-small">
<ul class="fa-ul">
<a href=""><i class="fa fa-facebook fa-2x"></i></a>
<a href=""><i class="fa fa-twitter fa-2x"></i></a>
<a href=""><i class="fa fa-instagram fa-2x"></i></a>
</div>
<a href="#offcanvas-nav" class="uk-navbar-toggle uk-visible-small data-uk-offcanvas"></a>
<div class="uk-navbar-content uk-navbar-center uk-visible-small">...</div>
</nav>
<div id="offcanvas-nav" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas data-uk-nav>">
<li class="uk-active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li class="uk-parent"><a href="">Gallery</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div class="uk-block uk-block-secondary">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/uikit/js/uikit.min.js"></script>
</body>
</html>