Mobile Responsiveness - Toggle

Joined
Jun 16, 2018
Messages
1
Reaction score
0
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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,794
Messages
2,569,641
Members
45,355
Latest member
SJLChristi

Latest Threads

Top